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

 

 

 

 

评论

8 楼 沉默表明一切1 2017-01-15  

楼主想问一下，怎样才能在浏览器看到这个store的内容，var store = $('#'+gridId1).omGrid('getData');

7 楼 mamacmm 2013-05-11  

诺诺0627 写道

我想问一下，如果Json数据时嵌套的，比如还有一列是学校，学校里面又有学院和学院号，学院里面又有专业和专业号，那么如何使用Grid来读取这个专业号呢，即在colModel的name中如何写的?

可以先处理下复杂的数据，映射到一个vo上（这个vo就是需要显示的所有列），然后转换成Json

6 楼 诺诺0627 2013-05-10  

我想问一下，如果Json数据时嵌套的，比如还有一列是学校，学校里面又有学院和学院号，学院里面又有专业和专业号，那么如何使用Grid来读取这个专业号呢，即在colModel的name中如何写的?

5 楼 Etoak_james2 2012-12-18  

LZ给分源码吧  [e-mail] 好人一生平爱 成为IT大牛啊
:idea:

4 楼 ppcqx 2012-12-03  

有没有研究出来，如何让grid和combo一起工作呀。举个例子，某单据有一个属性是单据状态，在数据库里面存储的是单据状态的编码，但是在界面显示时需要将单据状态的编码转化为单据状态。是不是可以使用grid和combo协同工作，有没有研究出来。

3 楼 weakfi 2012-10-22  

shixiaobao17145 写道

operamasks-ui的官网上不去了，有没有人管啊？

近期服务器在维修，很快就能恢复使用了。

2 楼 shixiaobao17145 2012-09-27  

operamasks-ui的官网上不去了，有没有人管啊？

1 楼 r1007500251 2012-08-31  

LZ能不能帮忙发一份你的源代码，看得不是太明白，可以发到站内邮箱，也可以发到[e-mail]，谢谢LZ了