operamasks-ui之omGrid简单使用

1.背景

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

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

2.先看下效果

operamasks-ui之omGrid简单使用

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 == "[email protected]") {
                                 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;
	}

}

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

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

operamasks-ui之omGrid简单使用

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，就写了这么点东西。。。

operamasks-ui之omGrid简单使用

继续阅读

J2EE系列：Tomcat多个项目部署内存溢出解决（实践）

Elasticsearch 8.X 新官方文档不好用，怎么办？

Java多线程常用方法

EJB : Message-Driven-Bean

【CentOS】ifconfig command not found

java递归循环跳出案例分析

Myeclipse 7 插件安装(以svn为例)

第一个爬虫程序实例——初学者

Spring核心机制-依赖注入

浅析SSH核心原理（二）

JSONP原理及最简单的JSONP实现

tree 递归树形菜单！

通用查询、分页详解J2EE

几个常用的Ajax库小节

Tomcat中 server.xml 的Context的配置

Spring MVC Controller参数接收方式