java_easyui体系之DataGrid（3）[转]

一：简介

在2的基础上实现增删改、增、改都是通过行编辑来实现的。具体业务逻辑：

1、 增加一条记录的时候：

a) 在datagrid表格最前端增加一行（当然也可在指定位置增加、）增加的行的字段必须与要显示的行的字段相同、或者用于存入数据库的更多信息，

b) 当有一条新增记录没有被保存时不能再增加新的行

c) 点击保存按钮、保存新增记录

d) 未保存之前点击撤销按钮、取消新增行

2、 修改一条记录的时候

a) 可以选择一条记录、点击修改之后出现可编辑状态

b) 可以双击一条记录直接出现可编辑状态、

c) 不管是那种进入修改的方式、都只能同时修改一条记录、并且密码列不允许编辑

3、 撤销功能：

a) 当点击新增、出现新增行之后、不想修改则可以取消新增

b) 当进入修改状态时、不想修改、点击撤销可取消修改状态

4、 删除：

a) 可同时删除多条记录、在删除之前会给出确认框、用于避免误删。

5、 关于新增、修改的与后台的交互操作、都是通过datagrid的onAfterEdit事件来完成的。具体的逻辑可根据自己的需要自行扩展

6、 对处于可编辑状态行的输入信息框进行了扩展：

a) 对用于选择时间的input扩展了一个datetimebox可以精确选择时间的功能

b) 对某列是否具有可编辑功能进行了扩展

二：关键之处

1、效果图：

2、datetimebox的扩展及使用方式

a）扩展代码：在自己定义的js中、页面必须引入此js文件 

/**
 * 扩展的关于编辑状态的 对要输入日期的控件使用
 */
$.extend($.fn.datagrid.defaults.editors, {
    datetimebox: {
        init: function(container, options){
            var editor = $('<input>').appendTo(container);
            options.editable = false;
            editor.datetimebox(options);
            return editor;
        },
        getValue: function(target){
            return $(target).datetimebox('getValue');
        },
        setValue: function(target, value){
            $(target).datetimebox('setValue', value);
        },
        resize: function(target, width){
            $(target).datetimebox('resize',width);
        },
        destroy: function(target){
            $(target).datetimebox('destroy');
        },
    }
});

b）使用方式：是在datagrid初始化时用于显示时间的相应列上加的属性、可见页面源码

title : '创建时间',
field : 'createTime',
width : 100,//必须要给
editor : {
    type:'datetimebox',//扩展的用于选择具体时间的类型
    options:{
        required: true,
    }
}

3、editor的扩展及使用方式

a）扩展代码：在自己定义的js中、页面必须引入此js文件

/**
 * 动态的选择处于修改状态的行中的某些列是否可编辑
 */
$.extend($.fn.datagrid.methods, {
    addEditor : function(jq, param){
        if(param instanceof Array){
            $.each(param, function(index, item){
                var e = $(jq).datagrid('getColumnOption', item.field);
                e.editor = item.editor;
            });
        } else {
            var e = $(jq).datagrid('getColumnOption', param.field);
            e.editor = param.editor;
        }
    },
    removeEditor : function(jq, param){
        if(param instanceof Array){
            $.each(param, function(index, item){
                var e = $(jq).datagrid('getColumnOption', item);
                e.editor = {};
            });
        } else {
            var e = $(jq).datagrid('getColumnOption', param);
            e.editor = {};
        }
    }
});

b）使用方式：是在点击修改按钮时触发的函数中、同样双击事件中也要加上、保持一致。

text : '修改',
iconCls : 'icon-edit',
handler : function() {
    var rows = $('#datagrid').datagrid('getSelections');
    if(rows.length ==1){
        //修改时、取消密码一栏的可编辑状态
        $('#datagrid').datagrid('removeEditor', 'passWord');
         
        if(editRow != undefined){
            $('#datagrid').datagrid('endEdit', editRow);
        }
        if(editRow == undefined){
            var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
            $('#datagrid').datagrid('beginEdit',rowIndex);
            editRow = rowIndex;
            $('#datagrid').datagrid('unselectAll');
        }
    }else if( rows.length == 0){
        $.messager.alert('提示', '请选择一条修改记录！','info');
    }else if(rows.length >= 1){
        $.messager.alert('提示', '只能选择一条修改记录！','info');
    }
}

三：页面源码

各个方法代码中都有很明确的注释、不再单独赘述。

1、首页 datagrid2

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
 
   
     
    <title>My JSP 'original.jsp' starting page</title>
     
    <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/chyUtils.js"></script>
     
    <script type="text/javascript">
        function userManage(id){
            console.info(id);
            if("door" == id){
                $('#tt').tabs('select', 0);
            }
            if("userManage" == id){
                $('#tt').tabs('select', 1);
            }
        }
    </script>
   
   
     
        <div data-options="region:'north', split:false" style="height:100px;"></div>
        <div data-options="region:'east',title:'在线列表',split:true" style="160px;"></div>
        <div data-options="region:'west',title:'功能导航',split:true" style="160px;">
            <div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">
                    content1
                </div>
                <div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">
                    <ul>
                        <li>门户 </li>
                        <li>用户管理</li>
                    </ul>
                </div>
            </div>
        </div>
        <div data-options="region:'center',title:'欢迎'," style="overflow: hidden;">
            <div id="tt" class="easyui-tabs" data-options="fit:true,border:false,">
            <div title="门户" data-options="closable:true">
                门户
            </div>
            <div id="userManage" title="用户管理" data-options="href:'user.jsp',closable:true">
            </div>
        </div>
        </div>
    

2、user.jsp:

<script type="text/javascript">
    $(function() {
        var editRow = undefined;//用于存放当前编辑行的index
 
        $('#datagrid').datagrid({
            url : 'login_getJson.action',
            title : '用户列表',
            iconCls : 'icon-save',
            pagination : true,
            pageSize : 10,
            pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
            fit : true,//使表格自适应
            fitColumns : true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用
            nowrap : false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
            border : false,
            idFeild : 'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
            sortName : 'id',//设置默认排序时的 字段（必须是field中的一个字段）
            sortOrder : 'asc',//是按照升序还是降序排序 但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
            columns : [ [ {
                title : '编号',
                field : 'id',
                width : 100,//必须要给
                //sortable:true,//指定按照这个排序
                checkbox : true,
                 
            }, {
                title : '姓名',
                field : 'userName',
                width : 100,//必须要给
                editor : {
                    type:'validatebox',
                    options:{
                        required: true,
                    }
                }
 
            }, {
                title : '密码',  
                field : 'passWord',
                width : 100,//必须要给
                editor : {
                    type:'validatebox',
                    options:{
                        required: true,
                    }
                }
            }, {
                title : '创建时间',
                field : 'createTime',
                width : 100,//必须要给
                editor : {
                    type:'datetimebox',//扩展的用于选择具体时间的类型
                    options:{
                        required: true,
                    }
                }
            }, {
                title : '修改时间',
                field : 'updateTime',
                width : 100,//必须要给
                editor : {
                    type:'datetimebox',//扩展的用于选择具体时间的类型
                    options:{
                        required: true,
                    }
                }
 
            } ] ],
            toolbar : [ {
                text : '增加',
                iconCls : 'icon-add',
                handler : function() {
                     
                    if(editRow != undefined){
                        $('#datagrid').datagrid('endEdit', editRow);
                    }
                    if(editRow == undefined){
                        $('#datagrid').datagrid('addEditor', {
                            field : 'passWord',
                            editor : {
                                type:'validatebox',
                                options:{
                                    required: true,
                                }
                            }
                        });
                         
                        $('#datagrid').datagrid('insertRow', {
                            index : 0,
                            row : {
                                id : "1",
                                userName:'请输入名称',
                                passWord:'请输入密码'
                            }
                        });
                        editRow = 0;
                        $('#datagrid').datagrid('beginEdit',0);
                         
                        /* 在最后一行添加一个增加行。
                        $('#datagrid').datagrid('appendRow', {
 
                        });
                        var rows = $('#datagrid').datagrid('getRows').length;
                        $('#datagrid').datagrid('beginEdit',rows-1);
                        */
                    }
                }
            }, '-', {
                text : '删除',
                iconCls : 'icon-remove',
                handler : function() {
                    var rows = $('#datagrid').datagrid('getSelections');
                    if(rows.length > 0){
                        $.messager.confirm('请确认','您确定要删除当前选择的'+rows.length+'项吗？', function(option){
                            if(option){
                                //一般将id的一个集合传到后台删除
                                var ids = [];
                                for(var i = 0; i< rows.length; i++){
                                    ids.push(rows[i].id);
                                }
                                console.info(ids.join(','));
                                /*在这里将id拼接的字符串传到后台、将其删除、调用ajax、在
                                    ajax的success中再重新加载一下datagrid表格:
                                    $('#datagrid').datagrid('load',{});
                                */
                                 
                            }
                        });
                    }else{
                        $.messager.alert('提示', '请选择要删除的记录', 'error');
                    }
                }
            }, '-', {
                text : '修改',
                iconCls : 'icon-edit',
                handler : function() {
                    var rows = $('#datagrid').datagrid('getSelections');
                    if(rows.length ==1){
                        //修改时、取消密码一栏的可编辑状态
                        $('#datagrid').datagrid('removeEditor', 'passWord');
                         
                        if(editRow != undefined){
                            $('#datagrid').datagrid('endEdit', editRow);
                        }
                        if(editRow == undefined){
                            var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
                            $('#datagrid').datagrid('beginEdit',rowIndex);
                            editRow = rowIndex;
                            $('#datagrid').datagrid('unselectAll');
                        }
                    }else if( rows.length == 0){
                        $.messager.alert('提示', '请选择一条修改记录！','info');
                    }else if(rows.length >= 1){
                        $.messager.alert('提示', '只能选择一条修改记录！','info');
                    }
                }
            }, '-',{
                text : '保存',
                iconCls : 'icon-save',
                handler : function() {
                    $('#datagrid').datagrid('endEdit', editRow);
                }
            }, '-',{
                text : '取消编辑',
                iconCls : 'icon-redo',
                handler : function() {
                    //将事务回滚、取消选中的行
                    editRow = undefined;
                    $('#datagrid').datagrid('rejectChanges');
                    $('#datagrid').datagrid('unselectAll');
                }
            }, '-' ],
            onAfterEdit : function(rowIndex, rowData, changes){
                console.info(rowData);
                //使用ajax提交、在success中处理、如果添加成功
                /*
                    1、添加成功
                    editRow = undefined;
                    2、添加不成功
                    $('#datagrid').datagrid('beginEdit', rowIndex);
                */
                 
                //假设添加成功 
                editRow = undefined;
                 
            },
            //双击修改行
            onDblClickRow : function(rowIndex, rowData){
                $('#datagrid').datagrid('unselectAll');
                if(editRow != undefined){
                    $('#datagrid').datagrid('endEdit', editRow);
                }
                if(editRow == undefined){
                    $('#datagrid').datagrid('removeEditor', 'passWord');
                    $('#datagrid').datagrid('beginEdit',rowIndex);
                    editRow = rowIndex;
                }
            }
        });
    });
 
    //查询数据
    function show() {
        $('#datagrid').datagrid('load', serializeObject($('#searchForm')));
    }
 
    //清除查询条件、返回初始数据展示状态
    function clean() {
        $('#datagrid').datagrid('load', {});
        $('#searchForm').find('input').val('');
    }
</script>
 
<div class="easyui-layout" data-options="fit:true,border:false,">
    <div data-options="region:'north',border:false,title:'过滤'" style="height: 140px;overflow: hidden">
        <form id="searchForm">
            <table class="datagrid-toolbar" style="height:100%;100%">
                <tbody><tr>
                    <th>用户名</th>
                    <td><input id="username" name="username" style=" 320px">
                    </td>
                </tr>
                <tr>
                    <th>创建时间</th>
                    <td><input name="createTimeStart" editable="false" class="easyui-datetimebox" style="155px;"> 至 <input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="155px;"></td>
                </tr>
                <tr>
                    <th>修改时间</th>
                    <td><input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="155px;"> 至 <input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="155px;"> 查询 清空</td>
                </tr>
            </tbody></table>
        </form>
 
    </div>
 
    <div data-options="region:'center',border:false">
        <table id="datagrid"></table>
    </div>
 
</div>

3、LoginAction——getJson()：

public String getJson() throws IOException{
    List<userdto> userList = new ArrayList<userdto>();
    userList.add(new UserDTO("1","chy","123",getCurrentTime(),getCurrentTime()));
    userList.add(new UserDTO("2","mxx","123",getCurrentTime(),getCurrentTime()));
    userList.add(new UserDTO("3","chk","123",getCurrentTime(),getCurrentTime()));
    if("chy".equals(username)){
        userList.add(new UserDTO("4","chy","123",getCurrentTime(),getCurrentTime()));
    }
    //当与后台交互时、可以根据前台回传的页号与每页记录数查询数据
    //List<userdto> userList = userService.getUsers(page, rows); 这样就可以动态获取每页记录数、前台动态展示。
    //但是现在前台的总页数却变成每页的记录数、这样就要求还要有个service查询总记录数、然后重新构造Json传回到前台
    //int count = userService.getUersCount();
     
    /*
     * 想要按照某个列进行排序的时候、就使用前台传过来的关于排序的字段和排序方式 sort、order
     * List<userdto> userList = userService.getUsers(page, rows, sort, order) 
     */
    System.out.println("sort" + sort + " order" + order);
     
    Map<string, object=""> m = new HashMap<string, object="">();
    m.put("total", 12);
    m.put("rows", userList);
     
     
    System.out.println(getJson(m));
     
    PrintWriter pw  = ServletActionContext.getResponse().getWriter();
    pw.write(getJson(m));
    pw.flush();
    pw.close();
    return null;
}
 
private String getCurrentTime(){
    SimpleDateFormat   sDateFormat   =   new   SimpleDateFormat("yyyy-MM-dd hh:mm:ss");   
    return  sDateFormat.format(new   java.util.Date()); 
     
}
 
private String getJson(Object o) throws IOException,
        JsonGenerationException, JsonMappingException {
    ObjectMapper om = new ObjectMapper();
    StringWriter sw = new StringWriter();
    JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);
    om.writeValue(jg, o);
    jg.close();
    return sw.toString();
}</string,></string,></userdto></userdto></userdto></userdto>

4、UserDTO：

package com.chy.ssh.business.bean;
 
import java.io.Serializable;
 
@SuppressWarnings("serial")
public class UserDTO implements Serializable{
    private String id;
    private String userName;
    private String passWord;
    private String createTime;
    private String updateTime;
     
     
    public UserDTO() {
        super();
    }
     
     
    public UserDTO(String id, String userName, String passWord,
            String createTime, String updateTime) {
        super();
        this.id = id;
        this.userName = userName;
        this.passWord = passWord;
        this.createTime = createTime;
        this.updateTime = updateTime;
    }
 
 
    public String getCreateTime() {
        return createTime;
    }
    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }
    public String getUpdateTime() {
        return updateTime;
    }
    public void setUpdateTime(String updateTime) {
        this.updateTime = updateTime;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getPassWord() {
        return passWord;
    }
    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
     
}

5、chyUtils.js:

/**
 * 动态的选择处于修改状态的行中的某些列是否可编辑
 */
$.extend($.fn.datagrid.methods, {
    addEditor : function(jq, param){
        if(param instanceof Array){
            $.each(param, function(index, item){
                var e = $(jq).datagrid('getColumnOption', item.field);
                e.editor = item.editor;
            });
        } else {
            var e = $(jq).datagrid('getColumnOption', param.field);
            e.editor = param.editor;
        }
    },
    removeEditor : function(jq, param){
        if(param instanceof Array){
            $.each(param, function(index, item){
                var e = $(jq).datagrid('getColumnOption', item);
                e.editor = {};
            });
        } else {
            var e = $(jq).datagrid('getColumnOption', param);
            e.editor = {};
        }
    }
});

四：补充说明

代码贴的比较多、这样看起来会有头有尾一点、以后用可以直接copy。。。没有与后台交互、但是这里不是重点、页面写好、后台就视个人而定了。