1.背景
1)本文只是简单记录下怎么使用operamasks-ui的omGrid进行增删改查，大部分代码可在operamasks-ui的demo看到；
2)前台使用freemarker模板，后台使用了Nutz框架；
2.先看下效果
3.前台代码编写
1)html
Freemarker代码 <@m.mp title="测试1" jquery="jquery-1.7.min" css="test/default" js="test/test6/index"> <@m.omui /> <div style="margin-left:30px;margin-top:20px"> <input type="button" id="add" value="新增"/> <input type="button" id="del" value="删除"/> <input type="button" id="save" value="保存修改"/> 姓名：<input id="qUserName"></input> <input id="query" type="button" value="查询"/> <table id="grid"></table> </div> </@m.mp>
其中的 <@m.mp> 是自己编写的标签库，用于生成页面主体
其中的 <@m.omui /> 是自己写的引入operamasks-ui的标签库，此标签的作用就是在页面上引入operamasks-ui所需的css和js文件。
2)css
Css代码 .om-grid div.bDiv tr.grayRow { background-color: gray; }
这里面根本就没什么内容。。。
3)js
主要演员都在这里了
Js代码 $(document).ready(function() { $.validator.addMethod("birthday", function(value) { return /^\d{4}年\d{2}月\d{2}日$/.test(value); }, '生日格式必须为 xxxx年xx月xx日'); var genderOptions = { dataSource : [{text:"请选择",value:""},{text:"女生" , value:"female"},{text:"男生",value:"male"},{text:"未知",value:"unknowned"}], editable: false }; var ageOptions = { allowDecimals:false, allowNegative:false }; var birthdayOptions = { // dateFormat:"yy年mm月dd日" dateFormat : "yy-mm-dd H:i:s", showTime : true }; $('#grid').omGrid({ title : '表格', width: "90%", height:450, showIndex : false, singleSelect : true, //出现checkbox列，可以选择同时多行记录 //rowClasses:['oddRow','evenRow','grayRow'], // onRowDblClick : function(rowIndex,rowData,event) { // var rtn = []; // for (var p in rowData) { // rtn.push(p + ':' + rowData[p]); // } // alert("双击事件。双击的行数据为：" + rtn.join(" ")); // }, //展开行时使用下面的方法生成详情，必须返回一个字符串 // rowDetailsProvider:function(rowData,rowIndex){ // return '第'+(rowIndex+1)+'行<br/>' // +'ID='+rowData.id // +'，用户名：<b>'+rowData.userName+'</b>' // +'，密码：<b>'+rowData.password+'</b><br/>' // +'所属组为：<font color="red">'+rowData.userType+'</font>'; // }, onRowClick : function(index,rowData,event){ $('#grid').omGrid('editRow',index); }, limit : 10, //分页显示，每页显示多少条 dataSource : 'test62.html', colModel : [ {header : 'ID', name : 'id', width : 100, align : 'center',sort:'clientSide',editor:{editable:false}}, {header : '姓名', name : 'userName', width : 120, align : 'left',sort:'clientSide', editor:{ rules:["required",true,"姓名是必填的"], type:"text", editable:true, name:"userName" } }, {header : '密码', name : 'password', align : 'left', renderer : function(colValue, rowData, rowIndex) { if (colValue == '123456') { return '<span style="color:red;"><b>' + colValue + '</b></span>'; } else if (colValue == "123A@wq") { return '<span style="color:green;"><b>' + colValue + '</b></span>'; } return colValue; }, editor:{ rules:["required",true,"密码不能为空"], type:"text", editable:true, name:"password" } }, // width : 'autoExpand' {header : '出生日期', name : 'birthday', width : 180, align : 'left',sort:'clientSide', // renderer : function(colValue, rowData, rowIndex) { // return "2012年06月10日"; // }, editor:{ //rules:["birthday"], type:"omCalendar", editable:true, name:"birthday", options:birthdayOptions } } ] }); $('#add').click(function(){ $.ajax({ type: "POST", url: "test65.html", async: false, dataType: "json", success: function(data){ if(data.flag){ $('#grid').omGrid('insertRow',0,{id:data.id}); } } }); }); $('#del').click(function(){ var dels = $('#grid').omGrid('getSelections'); if(dels.length <= 0 ){ alert('请选择删除的记录！'); return; } $('#grid').omGrid('deleteRow',dels[0]); }); $('#save').click(function(){ var formData = $('#grid').omGrid('getChanges'); //alert(formData["update"][0].userName); /*****此处传递data到后台并处理*******/ var formDataStr = JSON.stringify(formData); //alert(JSON.stringify(formData["update"])); $.ajax({ type: "POST", url: "test64.html", data: {formData:formDataStr}, async: false, dataType: "json", success: function(data){ if(data){ alert("保存成功"); } } }); /*****保存成功之后执行如下操作********/ $('#grid').omGrid('saveChanges'); /******或者执行$('#grid').omGrid('reload');***/ }); $('#query').bind('click', function(e) { var qUserName=$('#qUserName').val(); if(qUserName===""){ //没要有查询条件，要显示全部数据 $('#grid').omGrid("setData", 'test62.html'); }else{ //有查询条件，显示查询数据 $('#grid').omGrid("setData", 'test62.html?qUserName='+encodeURI(qUserName)); } }); });
从上往下依次是：验证、表格渲染、添加、删除、保存、查询
4.后台
1)显示列表，查询
看到列表渲染部分
Js代码 dataSource : 'test62.html'
调用了后台方法为 test62.html，后台代码：
Java代码 /** *测试operamasks-ui 列表 */ @At("/test62") @Ok("json") public GridDataModel<User> test62(){ String startStr = getRequest().getParameter("start"); String limitStr = getRequest().getParameter("limit"); int start = Integer.parseInt(startStr); int limit = Integer.parseInt(limitStr); if(start==0){ start=1; } Cnd cnd = null; String qUserName = getRequest().getParameter("qUserName"); if(null != qUserName){ cnd = Cnd.where("userName", "like", "%"+qUserName+"%"); } int pagesize = (start/limit)+1;//当前页 QueryResult qr = serviceManager.getUserService().query(cnd,pagesize,limit); GridDataModel<User> gdm = new GridDataModel<User>(); gdm.setTotal(qr.getPager().getRecordCount()); gdm.setRows((List<User>)qr.getList()); return gdm; }
这里传给前台一个 GridDataModel 的 json 格式数据，GridDataModel 的代码：
Java代码 public class GridDataModel<T> { // 显示的总数 private int total; // 行数据 private List<T> rows = new ArrayList<T>(); public List<T> getRows() { return rows; } public void setRows(List<T> rows) { this.rows = rows; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } }
此方法是进入列表和查询功能
输入姓名点击查询就可以进行模糊查询：
2)删除
点击页面上的删除，只是调用了页面的omGrid进行删除行，没有去后台操作，要点击保存修改后才起作用
所以请看后面保存修改的代码。
3)新增
点击页面的新增，会调用：
Js代码 url: "test65.html"
先查看下源码：
Java代码 /** *获取新增ID */ @At("/test65") @Ok("raw") public String test65(){ String result = ""; long maxId = serviceManager.getUserService().getMaxId(); result = "{\"flag\":true,\"id\":" + (maxId+1) + "}"; return result; }
获取user表的下一个ID；
为了简单，我自己手动拼了一个json数据返回到前台；
4)保存修改
前台调用了：
Js代码 url: "test64.html"
传的数据：
Js代码 var formData = $('#grid').omGrid('getChanges'); var formDataStr = JSON.stringify(formData); ... data: {formData:formDataStr}
前台把json对象变成字符串传到后台，下面是后台代码：
Java代码 /** *保存数据 */ @At("/test64") @Ok("json") public boolean test64(){ String formData = getRequest().getParameter("formData"); log.debug("表格更改数据：" + formData); Map<String,Object> map = (Map<String,Object>)Json.fromJson(formData); //更新列表 List<Map<String,Object>> updateList = (List<Map<String,Object>>)map.get("update"); List<User> uList = Json.fromJsonAsList(User.class, Json.toJson(updateList)); for (int i = 0; i < uList.size(); i++) { serviceManager.getUserService().update(uList.get(i)); } //新增列表 List<Map<String,Object>> insertList = (List<Map<String,Object>>)map.get("insert"); uList = Json.fromJsonAsList(User.class, Json.toJson(insertList)); for (int i = 0; i < uList.size(); i++) { serviceManager.getUserService().insert(uList.get(i)); } //删除列表 List<Map<String,Object>> deleteList = (List<Map<String,Object>>)map.get("delete"); uList = Json.fromJsonAsList(User.class, Json.toJson(deleteList)); for (int i = 0; i < uList.size(); i++) { serviceManager.getUserService().delete(uList.get(i)); } return true; }
===================================================
看了几天operamasks-ui，就写了这么点东西。。。
转载于:https://www.cnblogs.com/kms1989/archive/2012/08/15/2640517.html
相关资源：JAVA上百实例源码以及开源项目