easyui datagrid

一、

在使用easyui插件的时候，发现datagrid的官方（http://www.jeasyui.com/）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文件，需要引入

themes/default/easyui.css

themes/icon.css

jquery-1.10.2.min.js

jquery-migrate-1.2.1.min.js

jquery.json-2.4.min.js

jquery.easyui.min.js

locale/easyui-lang-zh_CN.js

其中用到的json插件，主页https://code.google.com/p/jquery-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)

// 使用方法： 点击新增按钮时调用

// 例如: <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append('#dgCode','code');">新增

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)

// 使用方法： 点击删除按钮时调用

// 例如: <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit('#dgCode','code');">删除

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的表达式，删除数据依然把整条数据传递给服务器端

// 使用方法： 点击保存按钮时调用

// 例如: <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept('#dgCode','code','<?=base_url();?>manager/system/commit_code','id');">保存

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)

// 使用方法： 点击撤销更改按钮时调用

// <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject('#dgCode','code');">撤销更改

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','<?=base_url();?>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: '<?=base_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','<?=base_url();?>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:
'<?=base_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"不设置即可，就是这么简单