operamasksui之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 : '表格',
         "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，就写了这么点东西。。。