[SSH_easyUI]细节3：dataGrid区域实现增删改查

1. userManag.jsp

EasyUI实现dataGrid的jsp页面，在这里通过easyUI包装后的js代码实现与后台数据的交互和前台样式的自定义。

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%><script type="text/javascript">    $(function() {        $('#admin_userManag_datagrid').datagrid({            url : '${pageContext.request.contextPath}/userAction!datagrid.action',            fit : true, //随外面自动缩放            fitColumns : true,//当列很少的时候，能让列自动填充所有区域            border : false,            pagination : true,            idField : 'id',//★确定/获取所有选中项（跨页选中）            rownumbers : true,//该属性会使得dataGrid渲染的时间会加长，不推荐使用（IE6），且显示区间不能扩大            sortName : 'name',//要排序的字段，是Field的值，默认升序排序            sortOrder : 'asc',//确定排序方式，不写默认升序            pageSize : 10,            pageList : [ 5, 10, 20, 30, 40, 50 ],//pageSize和pageList两个属性必须同时设置，且pageSize的值应该在pageList的数组里面            //pagePosition:'both',//如果不写，则默认显示在下面            //确定翻页用的toolbar缩放位置            checkOnSelect : false,//点击行的时候，前面复选框是否选中            selectOnCheck : false,//点击前面复选框的时候是否选中一行            frozenColumns : [ [ {//★★冻结列                field : 'id',                title : '编号',                width : 150,//如果不给宽度，则自动计算宽度，在渲染页面的时候将延长时间（很明显），建议所有列给定宽度                //hidden : true,//隐藏列                checkbox : true            }, {                field : 'name',                title : '登录名',                width : 150,                sortable : true            //★点击表列头，实现排序方式转换            } ] ],            columns : [ [ {//普通列                field : 'pwd',                title : '密码',                width : 150,                align : 'right',                formatter : function(value, index, row) {//★鼠标放上面，内容看全                    return "**********";/*'<span title="'+value+'">' + value + '</span>'*/                }            }, {                field : 'creatTime',                title : '创建时间',                width : 150,                sortable : true            //点击表列头，实现排序方式转换            }, {                field : 'endTime',                title : '修改时间',                width : 150,                sortable : true            //点击表列头，实现排序方式转换            } ] ],            /*toolbar : [ {//这是第一种方式，中括号里面每一项都是一个button                text : '查询',                iconCls : 'icon-search',                handler : function() {//按钮点击触发事件                }            }, '-', {//'-'表示两个按钮之间的分隔形式                text : '增加',                iconCls : 'icon-search'            } ]*/            //toolbar : '#admin_userManag_toolbar'//第二种方式            toolbar : [ {                text : '增加',                iconCls : 'icon-add',                handler : function() {                    append();                }            }, '-', {                text : '删除',                iconCls : 'icon-remove',                handler : function() {                    remove();                }            }, '-', {                text : '编辑',                iconCls : 'icon-edit',                handler : function() {                    editFun();                }            }, '-' ]        });    });    function editFun() {        var rows = $('#admin_userManag_datagrid').datagrid('getChecked');        //得到rows是数组        if (rows.length == 1) {            var d = $('<div/>').dialog({                width : 280,                height : 210,                href : '${pageContext.request.contextPath}/admin/userManagEdit.jsp',//将目标页面载入进来                modal : true,                title : '编辑用户',                buttons : [ {                    text : '编辑',                    handler : function() {//点击编辑是触发的事件                        // ★★用ajax方式和提交form表单的形式都是可以的                        $('#admin_userManagEdit_Form').form('submit', {                            url : '${pageContext.request.contextPath}/userAction!edit.action',                            success : function(data) {                                var obj = jQuery.parseJSON(data);                                if (obj.success) {                                    //d.dialog('close');///▲▲▲为什么放到这里，后面的所有内容都不再执行                                    //$('#admin_userManag_datagrid').datagrid('reload');                                    $('#admin_userManag_datagrid').datagrid('updateRow', {                                        index : $('#admin_userManag_datagrid').datagrid('getRowIndex', rows[0].id),                                        row : obj.obj                                    });                                    d.dialog('close');//▲▲为什么关闭修改对话框必须放到之后，这里有问题。能成功，但是js报错                                }                                $.messager.show({                                    title : '提示',                                    msg : obj.msg                                });                            }                        });                    }                } ],                //★★动态加载dialog，则应该在最后写一个closed的事件，否则随着点击次数增加，dom结点变得越来越多【节点内存溢出】                onClose : function() {                    $(this).dialog('destory');//点击关闭按钮删除相关结点                },                onLoad : function() {//★★在打开dialog的时候回显数据，这里不能用onOpen事件                    //最笨的方法：逐个实现回显                    /* $('#admin_userManagEdit_Form input[name=id]').val(rows[0].id);                    $('#admin_userManagEdit_Form input[name=name]').val(rows[0].name);                    $('#admin_userManagEdit_Form input[name=pwd]').val(rows[0].pwd);                    $('#admin_userManagEdit_Form input[name=creatTime]').val(rows[0].creatTime);                    $('#admin_userManagEdit_Form input[name=endTime]').val(rows[0].endTime); */                    $('#admin_userManagEdit_Form').form('load', rows[0]);//★等同于上面的多项                }            });        } else {            $.messager.alert('提示', '请选择一项数据');        }    }    function searchFun() {        /*        $('#admin_userManag_datagrid').datagrid('load', {            name : $('#admin_userManag_layout input[name=name]').val()        });*/        //这样处理多个条件的模糊查询：对应后台要扩展：addWhereCond()        $('#admin_userManag_datagrid').datagrid('load', serializeObject($('#admin_userManag_searchForm')));    }    function clearFun() {        $('#admin_userManag_layout input[name=name]').val('');        $('#admin_userManag_datagrid').datagrid('load', {});//清空就是什么都不往后台传    }    function append() {        $('#admin_userManag_addForm input').val('');//清空        $('#admin_userManag_addDialog').dialog('open');    }    function remove() {        //利用好getChecked和getSelect的意义        var rows = $('#admin_userManag_datagrid').datagrid('getChecked');        //var rows = $('#admin_yhgl_datagrid').datagrid('getSelected');        //var rows = $('#admin_yhgl_datagrid').datagrid('getSelections');        var ids = [];        if (rows.length > 0) {            $.messager.confirm('确认', '您是否要删除当前选中的项目？', function(r) {                if (r) {                    for ( var i = 0; i < rows.length; i++) {                        ids.push(rows[i].id);                    }                    $.ajax({                        url : '${pageContext.request.contextPath}/userAction!remove.action',                        data : {                            ids : ids.join(',')                        },                        dataType : 'json',                        success : function(r) {                            //★load:使当前页变为1；reload：记住当前页。删除后不要执行reload                            $('#admin_userManag_datagrid').datagrid('load');                            $('#admin_userManag_datagrid').datagrid('unselectAll');                            $.messager.show({                                title : '提示',                                msg : r.msg                            });                        }                    });                }            });        } else {            $.messager.show({                title : '提示',                msg : '请勾选要删除的记录！'            });        }    }</script><div id="admin_userManag_layout" class="easyui-layout" data-options="fit:true,border:false">    <div data-options="region:'north',title:'查询条件',border:false" style="height:65px;">        <form id="admin_userManag_searchForm">            检索用户名称（登录名）：<input name="name" /> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">查询</a>             <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="clearFun();">清空</a>        </form>    </div>    <div data-options="region:'center',border:false">        <table id="admin_userManag_datagrid"></table>    </div>    <!-- toolbar实现部分     <div id="admin_userManag_toolbar">        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" style="float:left;">编辑</a>        <div class="datagrid-btn-separator"></div>        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">帮助</a>    </div>    --></div><!-- 功能特点：    1. 点击增加按钮的时候模式化弹出窗口    2. 在填写信息后，点击"添加"后要提交表单    3. 表单数据有些是不能填写的（设置为readonly），表单提交进行验证    4. 添加完数据后要对datagrid刷新（reload）->easyUI的不刷新添加数据，否则toolbar区域的总数据条数不会发生变化    5. 第二次添加时，数据框中没有数据    6. 中文问题：所有的文件为UTF-8+★★[form]method="post"+struts字符拦截器+web.xml中的字符编码    属性说明：    closed:true：表示最初打开面板时该Dialog关闭，用到时才打开    modal:true：表示模式化打开窗口 --><div id="admin_userManag_addDialog" class="easyui-dialog" data-options="closed:true,modal:true,title:'添加用户',    buttons:[{        text : '增加',        iconCls : 'icon-add',        handler : function() {            $('#admin_userManag_addForm').form('submit',{                url:'${pageContext.request.contextPath}/userAction!addUser.action',                success:function(data){                    var obj=jQuery.parseJSON(data);                    console.info(obj);                    if(obj.success){                        //★★刷新整个datagrid效率不高,用appendRow和insertRow代替                        //$('#admin_userManag_datagrid').datagrid('load');                        //加载datagrid的最后 一行                        //$('#admin_userManag_datagrid').datagrid('appendRow',obj.obj);                        //★推荐用这种方式                        $('#admin_userManag_datagrid').datagrid('insertRow',{                            index:0,                            row:obj.obj                                             });                        $('#admin_userManag_addDialog').dialog('close');                                   }                    $.messager.show({                        title:'提示',                        msg:obj.msg                    })                }});            }        }]" style="width:280px;height:210px;" align="center">    <form id="admin_userManag_addForm" method="post">        <table>            <tr>                <th>编号</th>                <td><input name="id" readonly="readonly" />            </tr>            <tr>                <th>登录名</th>                <td><input name="name" class="easyui-validatebox" data-options="requird:true" />            </tr>            <tr>                <th>密码</th>                <td><input name="pwd" type="password" class="easyui-validatebox" data-options="requird:true" />            </tr>            <tr>                <th>创建时间</th>                <td><input name="creatTime" readonly="readonly" />            </tr>            <tr>                <th>修改时间</th>                <td><input name="endTime" readonly="readonly" />            </tr>        </table>    </form></div>

2. userManagEdit.jsp

该页面是在进行更改数据时弹出的那个页面，作为一个表单，当点击“编辑”的时候向通过form表单提交的方式向后台发送数据。

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%><form id="admin_userManagEdit_Form" method="post" >    <table>        <tr>            <th>编号</th>            <td><input name="id" readonly="readonly" />        </tr>        <tr>            <th>登录名</th>            <td><input name="name" class="easyui-validatebox" data-options="requird:true" />        </tr>        <tr>            <th>密码</th>            <td><input name="pwd" type="password" class="easyui-validatebox" data-options="requird:true" />        </tr>        <tr>            <th>创建时间</th>            <td><input name="creatTime"/>        </tr>        <tr>            <th>修改时间</th>            <td><input name="endTime" />        </tr>    </table></form>

3. 对应UserAction中的方法

public void datagrid() {    // 依据EasyUI框架需要的json数据内容定义的pageModel    // 也可以用Map    // Map m = new HashMap();    // m.put("total",0);    // m.put("rows",new ArrayList());    super.writeJson(userService.datagrid(user));}/** * 添加一条数据 */public void addUser() {    HwJson j = new HwJson();    try {        userService.save(user);        j.setSuccess(true);        j.setMsg("添加成功");        j.setObj(user);    } catch (Exception e) {        j.setMsg(e.getMessage());    }    super.writeJson(j);}public void remove() {    userService.remove(user.getIds());}public void edit() {    HwJson j = new HwJson();    try{        User u = userService.edit(user);        j.setSuccess(true);        j.setMsg("编辑成功");        j.setObj(u);    }catch(Exception e){        j.setMsg(e.getMessage());    }    super.writeJson(j);}

4. User(用于传递数据的pageModel，对应数据表的Model为Tuser)

public class User implements java.io.Serializable {    private String id;    private String name;    private String pwd;    private Date creatTime;    private Date endTime;    private int page;    private int rows;    private String sort;    private String order;    private String ids;    ///相应setter和getter略}

5. HwJson.java：前台和后台传送数据的json数据格式定义

public class HwJson implements Serializable{    private boolean success = false; ///返回标识：返回的数据是否正确    private String msg = "";//返回的数据信息    private Object obj = null;//★★在后台增加、删除、修改以后可能还要返回相应对象给前台    //对应的setter和getter方法略}

6. DataGrid .java

依据EasyUI、Demo后台返回的数据格式来定义页面model

public class DataGrid {    private Long total=0L;    private List rows = new ArrayList();    //相应的getter和setter方法略}

7. hwUtils.js

扩展easyUI中的功能

/** * 扩展validatebox，添加验证两次密码功能 */$.extend($.fn.validatebox.defaults.rules,{    eqPwd:{        validator:function(value,param){            return value==$(param[0]).val();        },        message:"两次密码不一致！"    }});/** * 一次性返回树的JSON串拼接 */$.fn.tree.defaults.loadFilter = function(data, parent) {    var opt = $(this).data().tree.options;    var idFiled, textFiled, parentField;    if (opt.parentField) {        idFiled = opt.idFiled || 'id';        textFiled = opt.textFiled || 'text';        parentField = opt.parentField;        var i, l, treeData = [], tmpMap = [];        for (i = 0, l = data.length; i < l; i++) {            tmpMap[data[i][idFiled]] = data[i];        }        for (i = 0, l = data.length; i < l; i++) {            if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {                if (!tmpMap[data[i][parentField]]['children'])                    tmpMap[data[i][parentField]]['children'] = [];                data[i]['text'] = data[i][textFiled];                tmpMap[data[i][parentField]]['children'].push(data[i]);            } else {                data[i]['text'] = data[i][textFiled];                treeData.push(data[i]);            }        }        return treeData;    }    return data;};/** * 防止panel/window/dialog组件超出浏览器边界 */var easyuiPanelOnMove = function(left, top) {    var l = left;    var t = top;    if (l < 1) {        l = 1;    }    if (t < 1) {        t = 1;    }    var width = parseInt($(this).parent().css('width')) + 14;    var height = parseInt($(this).parent().css('height')) + 14;    var right = l + width;    var buttom = t + height;    var browserWidth = $(window).width();    var browserHeight = $(window).height();    if (right > browserWidth) {        l = browserWidth - width;    }    if (buttom > browserHeight) {        t = browserHeight - height;    }    $(this).parent().css({/* 修正面板位置 */        left : l,        top : t    });};$.fn.dialog.defaults.onMove = easyuiPanelOnMove;$.fn.window.defaults.onMove = easyuiPanelOnMove;$.fn.panel.defaults.onMove = easyuiPanelOnMove;/** * ★将form表单元素的值序列化成对象 */serializeObject = function(form) {    var o = {};    $.each(form.serializeArray(), function(index) {        if (o[this['name']]) {            o[this['name']] = o[this['name']] + "," + this['value'];        } else {            o[this['name']] = this['value'];        }    });    return o;};