jQuery EasyUI插件使用之datagrid的tab页面和行内编辑功能的整合

一、
在使用easyui插件的时候，发现datagrid的官方（）demo都是针对某一个功能来进行讲解
比如我们最常用的datagrid的form编辑功能几乎没提到
不过呢，在官网demo主页的第一个例子，就是Application下的 Basic CRUD Application 就是一个form编辑的案例
需要自己创建一个dialog来做form的提交

而datagrid的行编辑功能在datagrid的例子Row Editing in DataGrid里面
也讲的比较完整了，只是缺少了和服务器端交互的部分

二、
使用了多个表格插件之后，个人觉得jqGrid这个插件相对来说是比较强大的（http://www.trirand.com/blog/）
不论是行编辑还是form编辑，而且各种配置参数也是非常详尽，开发者能想到的几乎都涵盖了进去

三、现状是
使用easyui插件开发了一个网站，左侧是菜单，点击不同的菜单，在主页面就显示一个tab页面
而每个tab页面里边都有一个有待管理的datagrid，datagrid的编辑方式采用行编辑模式


此时如果照着官网的demo来为每个tab页面的datagrid写代码，显然有太多的重复工作
并且，由于多个tab页面添加进来以后，实际是都是在同一个页面上显示，还需要考虑每个datagrid之间不能有代码冲突的问题
例如，官网的行编辑例子里面第一句代码 

var editIndex = undefined;

定义的当前编辑行行号，这个就必须为每一个datagrid定义一个不同的变量
好，为了解决这些问题，在官网例子的基础上，开始改造一个更通用的代码

四、准备工作
首先主页的的样式和用到的js文件，需要引入
其中用到的json插件，主页
用于把javascript对象转换成json字符串，用法就是$.toJSON(object);
方便于传递给服务器端

为了提供好的用户体验，在点击了保存按钮时，显示一个“正在保存”的提示，并且阻止用户多次提交
我们在主页面上放上一个window（从官方demo里面拿来修改了一点点）
等待保存时显示出来

<div id="w" class="easyui-window" title="请稍候..."
    data-options="modal:true,closed:true,closable:false,minimizable:false,maximizable:false,iconCls:'icon-save'"
    style="width:200px;height:80px;padding:10px;">
        保存中，请不要刷新页面
</div>

五、开始修改官方代码
胡乱新建一个js文件，就叫什么easyui-row-edit.js吧

1、 修改 var editIndex = undefined;

// 定义一个全局对象，存放不同tab页面中各个datagrid对应的当前行号
// 而下面的所有方法，都加了一个参数： indexKey ，每个datagrid取一个唯一的key传进来即可
// 例如，菜单管理传入参数'menu'，代码管理传入参数'code'
// 这样 editIndex = { menu: 10, code: 15 } 就能清晰地分别开每个datagrid当前行了
var editIndex = {};

2、 修改 function endEditing

// 判断目前在编辑的行是否可结束编辑
// 主要是对各输入字段的校验（字段的校验规则在初始化datagrid时指定）
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
//             indexKey (该datagrid当前编辑行在对象editIndex中的key)
// return: 通过校验返回true，否则false
// 本方法提供给以下其他方法调用
function endEditing( datagridId, indexKey ){
    console.log(editIndex);
    if (editIndex[indexKey] == undefined){return true;}    // 当前没有编辑的行直接返回true
    if ($(datagridId).datagrid('validateRow', editIndex[indexKey])){ //校验通过
        $(datagridId).datagrid('endEdit', editIndex[indexKey]);        // 完成编辑
        editIndex[indexKey] = undefined;
        return true;
    } else {
        return false;        //未通过校验
    }
}

3、修改function onClickRow

// 点击数据行的时候所做的操作
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
//             index: 当前点击的行
//             indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法：     $('#dgCode').datagrid({
//onClickRow: function(index){
//    onClickRow('#dgCode', index ,'code');
//}
//});
function onClickRow(datagridId, index, indexKey){
    if (editIndex[indexKey] != index){    // 点击的行和当前编辑的行不一样时
        if (endEditing( datagridId, indexKey )){    // 当前编辑的行可结束编辑时
            $(datagridId).datagrid('selectRow', index) // 选中当前点击行
                    .datagrid('beginEdit', index);     // 并开始编辑
            editIndex[indexKey] = index;                            // 当前编辑行变成点击的行
        } else {    // 当前编辑行不可结束
            $(datagridId).datagrid('selectRow', editIndex[indexKey]); // 继续留在当前编辑的行
        }
    }
}

4、修改 function append

// 新增行
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
//             indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法： 点击新增按钮时调用
// 例如: 新增
function append( datagridId ,indexKey ){
    if (endEditing( datagridId, indexKey )){ // 首先还是要判断是否能结束当前编辑行
        $(datagridId).datagrid('appendRow',{ /*status:'P'*/});     // 新增一行再最后
        editIndex[indexKey] = $(datagridId).datagrid('getRows').length-1;
        $(datagridId).datagrid('selectRow', editIndex[indexKey])     // 并选中新增的行
                .datagrid('beginEdit', editIndex[indexKey]); // 并开始编辑
    }
}

5、修改function removeit

// 删除行
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
//             indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法： 点击删除按钮时调用
// 例如: 删除
function removeit( datagridId, indexKey ){
    if (editIndex[indexKey] == undefined){ return; } // 当前没有选中行，什么也不做，直接返回
    $( datagridId ).datagrid('cancelEdit', editIndex[indexKey]) // 取消当前编辑行的编辑
            .datagrid('deleteRow', editIndex[indexKey]); // 并删除当前行
    editIndex[indexKey] = undefined;
}

6、修改function accept

// 保存更改
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
//             indexKey (该datagrid当前编辑行在对象editIndex中的key)
//             url ( 保存的url )
//             ids 主键字段(可选)
//                 考虑到数据行数据量可能较大，当删除的时候，其实服务器端只需要知道主键即可
//                   为了减轻网络压力，前端只传递删除的主键数组即可
//                 1、单主键的情况，参数传入字符串,例如是'id'，此时传递到服务器端的就是一个id数组：['44445','4444','3333','1002']或者['usera','userb','userc','userd']
//                 2、组合字段做主键时，参数传入数组，例如['userid','mobile']，传递到服务器端的就是一个对象数组:[{userid:'usera',mobile:'135'},{userid:'userb',mobile:'136'}]
//                 3、不传入参数，或者传入任何返回false的表达式，删除数据依然把整条数据传递给服务器端
// 使用方法： 点击保存按钮时调用
// 例如: 保存
function accept( datagridId, indexKey, url, ids ){
    // 还是先判断是否可结束编辑才能继续保存
    if ( !endEditing( datagridId , indexKey) ) return;
    // 判断一下，没有更改，则不用保存
    if ( $(datagridId).datagrid('getChanges').length === 0 ) return;

    // 分别获得新增行、删除行、更改行的数据
    var inserted = $( datagridId ).datagrid('getChanges','inserted');
    var deleted = $( datagridId ).datagrid('getChanges','deleted');
    var updated = $( datagridId ).datagrid('getChanges','updated');
    var deletedId = [];        //
    if ( ids ) { // 设置了主键字段，才重新组装删除行的数据
        if ( $.isArray(ids) ) { // 组合主键的，只返回包含组合主键和值的对象
            deletedId = $.map( deleted, function(row ){
                var newRow = {};
                $.each( ids,function(idx, id){
                    newRow[id] = row[id];
                });
                return newRow ;
            });
        } else { // 只有一个主键字段的，只返回主键的值，连主键都不用返回
            deletedId = $.map( deleted, function(row ){
                return row[ids] ;
            });
        }
    } else {
        deletedId = deleted;
    }

    $('#w').window('open');

    $.ajax({
        url: url,
        dataType: 'json',
        method: 'POST',
        data : {
            inserted: $.toJSON(inserted),
            updated: $.toJSON(updated),
            deleted: $.toJSON(deletedId)
        }
    }).done(function(data){
        if (data.status === 'OK') { // 提交成功
            $(datagridId).datagrid('acceptChanges');
            $(datagridId).datagrid('reload'); // 刷新datagrid
        }

    }).fail(function(resp){
        $.messager.alert('出错了',resp.responseText);
    }).always(function(){
        $('#w').window('close');
    });
}

7、修改function reject

// 撤销更改
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
//             indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法： 点击撤销更改按钮时调用
// 撤销更改
function reject( datagridId, indexKey ){
    $( datagridId ).datagrid('rejectChanges');
    editIndex[indexKey] = undefined;
}

六、
主页面引入该文件easyui-row-edit.js
好啦，不同的tab页面只要简单调用即可，例如“代码管理”tab页面的datagrid和toolbar是这样子

<table id="dgCode" title="系统代码列表" style="width:850px;height:auto"
            toolbar="#toolbarCode" pagination="true" idField="id"
            rownumbers="true" fitColumns="true" singleSelect="true" striped="true"
            data-options="" pageSize="20">

<div id="toolbarCode">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append('#dgCode','code');">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit('#dgCode','code');">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept('#dgCode','code','manager/system/commit_code','id');">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject('#dgCode','code');">撤销更改</a>
    </div>

并且加一小段javascript代码

<script type="text/javascript">
    editIndex['code'] = undefined;
    $(function(){
        $('#dgCode').datagrid({
            url: 'manager/system/get_code_list',
            onClickRow: function(index){
                onClickRow('#dgCode', index ,'code');
            }
        });
    });
</script>

而“菜单管理”tab页面只需要把上面的代码黑色+下划线部分修改一下即可
并且把两个url修改一下，分别获取菜单列表和提交更改的url

<table id="dgMenu" title="菜单列表" style="width:700px;height:auto"
            toolbar="#toolbarMenu" pagination="true" idField="id"
            rownumbers="true" fitColumns="true" singleSelect="true" striped="true"
            data-options="" pageSize="20">

<div id="toolbarMenu">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append('#dgMenu', 'menu');">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit('#dgMenu', 'menu');">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept('#dgMenu','menu','manager/system/commit_menu','id');">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject('#dgMenu', 'menu');">撤销更改</a>
    </div>

<script type="text/javascript">
    editIndex['menu'] = undefined;
    $(function(){
        $('#dgMenu').datagrid({
            url: 'manager/system/get_menu_list',
            onClickRow: function(index){
                onClickRow('#dgMenu', index, 'menu' );
            }
        });
    });
</script>

新增加的tab页面以此类推即可，简化了工作流程

七、服务器端的处理
我使用的是php的codeigniter框架，在controller这样处理

function commit_menu(){
        $inserted = isset($_POST['inserted']) ? json_decode( $_POST['inserted'], true ) : false;
        $updated = isset($_POST['updated']) ? json_decode( $_POST['updated'], true ) : false;
        $deleted = isset($_POST['deleted']) ? json_decode( $_POST['deleted'], true ) : false;

        $this->load->model('system_model');
        if ( $inserted ) {
            $this->system_model->insertMenus($inserted);
        }
        if ( $updated ) {
            $this->system_model->updateMenus($updated);
        }
        if ( $deleted ) {
            $this->system_model->deleteMenus($deleted);
        }

        $result['status'] = 'OK';
        $this->output
            ->set_content_type("application/json")
            ->set_output( json_encode( $result));
    }

在model层的处理就更简单了，使用Active Record的批量提交

function insertMenus ( $rows ){
        $this->db->insert_batch(TABLE_SYSTEM_MENU, $rows);
    }

    function updateMenus ( $rows ){
        $this->db->update_batch(TABLE_SYSTEM_MENU, $rows,'id');
    }

    function deleteMenus ( $ids ) {
        foreach($ids as $id) {
            $this->db->delete(TABLE_SYSTEM_MENU, array('id' => $id));
        }
    }

其实，如果提交的处理都大同小异的话，在php后台也可以把这块功能单独写成通用的函数
只要传入不同的表名即可处理，这个就简单了，不做赘述。

补充一点：
由于刚使用easyui插件，很多方面处于摸索阶段，都是依靠官方的api文档
而api文档有的地方其实讲的不是很清楚，难免走了很多弯路

在使用行编辑功能的时候，有的字段不允许编辑，比如说创建时间，后台自动生成，前台不允许编辑
试了很多方法没搞成，最后才发现，只要在初始化这个字段的时候，"editor"不设置即可，就是这么简单