operamasks-ui之omGrid简单使用

1.背景

1)本文只是简单记录下怎么使用operamasks-ui的omGrid进行增删改查，大部分代码可在operamasks-ui的demo看到；

2)前台使用freemarker模板，后台使用了Nutz框架；

 

2.先看下效果


 

3.前台代码编写

 

1)html

 

Freemarker代码  收藏代码
  1. <@m.mp title="测试1" jquery="jquery-1.7.min" css="test/default" js="test/test6/index">  
  2. <@m.omui />  
  3.   
  4. <div style="margin-left:30px;margin-top:20px">  
  5.         <input type="button" id="add" value="新增"/>  
  6.         <input type="button" id="del" value="删除"/>  
  7.         <input type="button" id="save" value="保存修改"/>  
  8.          姓名：<input id="qUserName"></input>  
  9.         <input id="query" type="button" value="查询"/>  
  10.         <table id="grid"></table>  
  11. </div>  
  12.   
  13. </@m.mp>  

 

其中的 <@m.mp> 是自己编写的标签库，用于生成页面主体

其中的 <@m.omui />  是自己写的引入operamasks-ui的标签库，此标签的作用就是在页面上引入operamasks-ui所需的css和js文件。

 

 

2)css

 

 

Css代码  收藏代码
  1. .om-grid div.bDiv tr.grayRow {  
  2.     background-color: gray;  
  3. }  

 

 

这里面根本就没什么内容。。。

 

3)js

 

主要演员都在这里了

 

 

Js代码  收藏代码
  1. $(document).ready(function() {  
  2.       
  3.     $.validator.addMethod("birthday", function(value) {  
  4.         return /^\d{4}年\d{2}月\d{2}日$/.test(value);  
  5.     }, '生日格式必须为 xxxx年xx月xx日');  
  6.   
  7.     var genderOptions = {  
  8.         dataSource : [{text:"请选择",value:""},{text:"女生" , value:"female"},{text:"男生",value:"male"},{text:"未知",value:"unknowned"}],  
  9.         editable: false  
  10.     };  
  11.   
  12.     var ageOptions = {  
  13.         allowDecimals:false,  
  14.         allowNegative:false  
  15.     };  
  16.   
  17.     var birthdayOptions = {  
  18. //      dateFormat:"yy年mm月dd日"  
  19.         dateFormat : "yy-mm-dd H:i:s",  
  20.         showTime : true  
  21.     };  
  22.       
  23.     $('#grid').omGrid({  
  24.         title : '表格',  
  25.         width: "90%",  
  26.         height:450,  
  27.         showIndex : false,  
  28.         singleSelect : true, //出现checkbox列，可以选择同时多行记录  
  29.         //rowClasses:['oddRow','evenRow','grayRow'],  
  30. //        onRowDblClick : function(rowIndex,rowData,event) {  
  31. //            var rtn = [];  
  32. //            for (var p in rowData) {  
  33. //                rtn.push(p + ':' + rowData[p]);  
  34. //            }  
  35. //            alert("双击事件。双击的行数据为：" + rtn.join(" "));  
  36. //        },  
  37.         //展开行时使用下面的方法生成详情，必须返回一个字符串  
  38. //        rowDetailsProvider:function(rowData,rowIndex){  
  39. //            return '第'+(rowIndex+1)+'行<br/>'  
  40. //            +'ID='+rowData.id  
  41. //            +'，用户名：<b>'+rowData.userName+'</b>'  
  42. //            +'，密码：<b>'+rowData.password+'</b><br/>'  
  43. //            +'所属组为：<font color="red">'+rowData.userType+'</font>';  
  44. //        },  
  45.         onRowClick : function(index,rowData,event){  
  46.             $('#grid').omGrid('editRow',index);  
  47.         },  
  48.         limit : 10, //分页显示，每页显示多少条  
  49.         dataSource : 'test62.html',  
  50.         colModel : [ {header : 'ID', name : 'id', width : 100, align : 'center',sort:'clientSide',editor:{editable:false}},   
  51.                      {header : '姓名', name : 'userName', width : 120, align : 'left',sort:'clientSide',  
  52.                         editor:{  
  53.                             rules:["required",true,"姓名是必填的"],  
  54.                             type:"text",  
  55.                             editable:true,  
  56.                             name:"userName"  
  57.                         }  
  58.                      },   
  59.                      {header : '密码', name : 'password', align : 'left',  
  60.                         renderer : function(colValue, rowData, rowIndex) {  
  61.                              if (colValue == '123456') {  
  62.                                  return '<span style="color:red;"><b>' + colValue + '</b></span>';  
  63.                              } else if (colValue == "123A@wq") {  
  64.                                  return '<span style="color:green;"><b>' + colValue + '</b></span>';  
  65.                              }  
  66.                              return colValue;  
  67.                         },  
  68.                         editor:{  
  69.                             rules:["required",true,"密码不能为空"],  
  70.                             type:"text",  
  71.                             editable:true,  
  72.                             name:"password"  
  73.                         }  
  74.                      },  
  75. //                     width : 'autoExpand'  
  76.                      {header : '出生日期', name : 'birthday', width : 180, align : 'left',sort:'clientSide',  
  77. //                      renderer : function(colValue, rowData, rowIndex) {  
  78. //                             return "2012年06月10日";  
  79. //                        },  
  80.                         editor:{  
  81.                             //rules:["birthday"],  
  82.                             type:"omCalendar",  
  83.                             editable:true,  
  84.                             name:"birthday",  
  85.                             options:birthdayOptions  
  86.                         }  
  87.                      }  
  88.                    ]  
  89.                      
  90.                      
  91.     });  
  92.   
  93.     $('#add').click(function(){  
  94.         $.ajax({  
  95.             type: "POST",  
  96.             url: "test65.html",  
  97.             async: false,  
  98.             dataType: "json",  
  99.             success: function(data){  
  100.                 if(data.flag){  
  101.                     $('#grid').omGrid('insertRow',0,{id:data.id});  
  102.                 }  
  103.                   
  104.             }  
  105.         });  
  106.           
  107.           
  108.     });  
  109.       
  110.     $('#del').click(function(){  
  111.         var dels = $('#grid').omGrid('getSelections');  
  112.         if(dels.length <= 0 ){  
  113.             alert('请选择删除的记录！');  
  114.             return;  
  115.         }  
  116.         $('#grid').omGrid('deleteRow',dels[0]);  
  117.     });  
  118.   
  119.     $('#save').click(function(){  
  120.         var formData = $('#grid').omGrid('getChanges');  
  121.         //alert(formData["update"][0].userName);  
  122.           
  123.         /*****此处传递data到后台并处理*******/  
  124.         var formDataStr = JSON.stringify(formData);  
  125.           
  126.         //alert(JSON.stringify(formData["update"]));  
  127.           
  128.         $.ajax({  
  129.             type: "POST",  
  130.             url: "test64.html",  
  131.             data: {formData:formDataStr},  
  132.             async: false,  
  133.             dataType: "json",  
  134.             success: function(data){  
  135.                 if(data){  
  136.                     alert("保存成功");  
  137.                 }  
  138.                   
  139.             }  
  140.         });  
  141.           
  142.         /*****保存成功之后执行如下操作********/  
  143.          $('#grid').omGrid('saveChanges');  
  144.         /******或者执行$('#grid').omGrid('reload');***/  
  145.     });  
  146.       
  147.     $('#query').bind('click', function(e) {  
  148.          var qUserName=$('#qUserName').val();  
  149.          if(qUserName===""){ //没要有查询条件，要显示全部数据  
  150.              $('#grid').omGrid("setData", 'test62.html');  
  151.          }else{ //有查询条件，显示查询数据  
  152.              $('#grid').omGrid("setData", 'test62.html?qUserName='+encodeURI(qUserName));  
  153.          }  
  154.     });  
  155.       
  156. });  

 

 

从上往下依次是：验证、表格渲染、添加、删除、保存、查询

 

 

4.后台

 

1)显示列表，查询

 

看到列表渲染部分

 

Js代码  收藏代码
  1. dataSource : 'test62.html'  

 调用了后台方法为  test62.html，后台代码：

 

Java代码  收藏代码
  1. /** 
  2.      *测试operamasks-ui 列表 
  3.      */  
  4.     @At("/test62")  
  5.     @Ok("json")  
  6.     public GridDataModel<User> test62(){  
  7.         String startStr = getRequest().getParameter("start");  
  8.         String limitStr = getRequest().getParameter("limit");  
  9.         int start = Integer.parseInt(startStr);  
  10.         int limit = Integer.parseInt(limitStr);  
  11.         if(start==0){  
  12.             start=1;  
  13.         }  
  14.           
  15.         Cnd cnd = null;  
  16.         String qUserName = getRequest().getParameter("qUserName");  
  17.         if(null != qUserName){  
  18.             cnd = Cnd.where("userName", "like", "%"+qUserName+"%");  
  19.         }  
  20.           
  21.         int pagesize = (start/limit)+1;//当前页  
  22.         QueryResult qr = serviceManager.getUserService().query(cnd,pagesize,limit);  
  23.           
  24.           
  25.         GridDataModel<User> gdm = new GridDataModel<User>();  
  26.         gdm.setTotal(qr.getPager().getRecordCount());  
  27.         gdm.setRows((List<User>)qr.getList());  
  28.           
  29.         return gdm;  
  30.     }  

 

这里传给前台一个  GridDataModel  的 json 格式数据，GridDataModel  的代码：

 

 

Java代码  收藏代码
  1. public class GridDataModel<T> {  
  2.     // 显示的总数  
  3.     private int total;  
  4.     // 行数据  
  5.     private List<T> rows = new ArrayList<T>();  
  6.       
  7.     public List<T> getRows() {  
  8.         return rows;  
  9.     }  
  10.   
  11.     public void setRows(List<T> rows) {  
  12.         this.rows = rows;  
  13.     }  
  14.   
  15.     public int getTotal() {  
  16.         return total;  
  17.     }  
  18.   
  19.     public void setTotal(int total) {  
  20.         this.total = total;  
  21.     }  
  22.   
  23. }  

 

此方法是进入列表和查询功能

 

输入姓名点击查询就可以进行模糊查询：


2)删除

点击页面上的删除，只是调用了页面的omGrid进行删除行，没有去后台操作，要点击保存修改后才起作用

所以请看后面保存修改的代码。

 

3)新增

点击页面的新增，会调用：

 

Js代码  收藏代码
  1. url: "test65.html"  

先查看下源码：

 

 

Java代码  收藏代码
  1. /** 
  2.      *获取新增ID 
  3.      */  
  4.     @At("/test65")  
  5.     @Ok("raw")  
  6.     public String test65(){  
  7.         String result = "";  
  8.         long maxId = serviceManager.getUserService().getMaxId();  
  9.         result = "{\"flag\":true,\"id\":" + (maxId+1) + "}";  
  10.         return result;  
  11.     }  

 

获取user表的下一个ID；

为了简单，我自己手动拼了一个json数据返回到前台；

 

4)保存修改

前台调用了：

 

Js代码  收藏代码
  1. url: "test64.html"  

 传的数据：

 

Js代码  收藏代码
  1. var formData = $('#grid').omGrid('getChanges');  
  2. var formDataStr = JSON.stringify(formData);  
  3. ...  
  4. data: {formData:formDataStr}  

 前台把json对象变成字符串传到后台，下面是后台代码：

 

 

Java代码  收藏代码
  1. /** 
  2.      *保存数据 
  3.      */  
  4.     @At("/test64")  
  5.     @Ok("json")  
  6.     public boolean test64(){  
  7.         String formData = getRequest().getParameter("formData");  
  8.         log.debug("表格更改数据：" + formData);  
  9.         Map<String,Object> map = (Map<String,Object>)Json.fromJson(formData);  
  10.           
  11.         //更新列表  
  12.         List<Map<String,Object>> updateList = (List<Map<String,Object>>)map.get("update");  
  13.         List<User> uList = Json.fromJsonAsList(User.class, Json.toJson(updateList));  
  14.         for (int i = 0; i < uList.size(); i++) {  
  15.             serviceManager.getUserService().update(uList.get(i));  
  16.         }  
  17.           
  18.         //新增列表  
  19.         List<Map<String,Object>> insertList = (List<Map<String,Object>>)map.get("insert");  
  20.         uList = Json.fromJsonAsList(User.class, Json.toJson(insertList));  
  21.         for (int i = 0; i < uList.size(); i++) {  
  22.             serviceManager.getUserService().insert(uList.get(i));  
  23.         }  
  24.           
  25.         //删除列表  
  26.         List<Map<String,Object>> deleteList = (List<Map<String,Object>>)map.get("delete");  
  27.         uList = Json.fromJsonAsList(User.class, Json.toJson(deleteList));  
  28.         for (int i = 0; i < uList.size(); i++) {  
  29.             serviceManager.getUserService().delete(uList.get(i));  
  30.         }  
  31.           
  32.         return true;  
  33.     }  

 

 

 

 

 

===================================================

 

看了几天operamasks-ui，就写了这么点东西。。。

 

 

 

posted @ 2012-08-15 17:50  Mason.Ke  阅读(2014)  评论(1)  编辑  收藏  举报