operamasks-ui之omGrid简单使用
1.背景
1)本文只是简单记录下怎么使用operamasks-ui的omGrid进行增删改查，大部分代码可在operamasks-ui的demo看到；
2)前台使用freemarker模板，后台使用了Nutz框架；
2.先看下效果
3.前台代码编写
1)html
<@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
.om-grid div.bDiv tr.grayRow {
background-color: gray;
}
这里面根本就没什么内容。。。
3)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)显示列表，查询
看到列表渲染部分
dataSource : 'test62.html'
调用了后台方法为 test62.html，后台代码：
/**
*测试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 的代码：
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)新增
点击页面的新增，会调用：
url: "test65.html"
先查看下源码：
/**
*获取新增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)保存修改
前台调用了：
url: "test64.html"
传的数据：
var formData = $('#grid').omGrid('getChanges');
var formDataStr = JSON.stringify(formData);
...
data: {formData:formDataStr}
前台把json对象变成字符串传到后台，下面是后台代码：
/**
*保存数据
*/
@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，就写了这么点东西。。。