一、
在使用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之间不能有代码冲突的问题
例如,官网的行编辑例子里面第一句代码
定义的当前编辑行行号,这个就必须为每一个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里面拿来修改了一点点)
等待保存时显示出来
五、开始修改官方代码
胡乱新建一个js文件,就叫什么 easyui-row-edit.js吧
1、 修改 var editIndex = undefined;
2、 修改 function endEditing
3、修改function onClickRow
4、修改 function append
5、修改function removeit
6、修改function accept
7、修改function reject
六、
主页面引入该文件 easyui-row-edit.js
好啦,不同的tab页面只要简单调用即可,例如“ 代码管理”tab页面的datagrid和toolbar是这样子
并且加一小段javascript代码
而“ 菜单管理”tab页面只需要把上面的代码黑色+下划线部分修改一下即可
并且把两个url修改一下,分别获取菜单列表和提交更改的url
新增加的tab页面以此类推即可,简化了工作流程
七、服务器端的处理
我使用的是php的codeigniter框架,在controller这样处理
在model层的处理就更简单了,使用Active Record的批量提交
其实,如果提交的处理都大同小异的话,在php后台也可以把这块功能单独写成通用的函数
只要传入不同的表名即可处理,这个就简单了,不做赘述。
补充一点:
由于刚使用easyui插件,很多方面处于摸索阶段,都是依靠官方的api文档
而api文档有的地方其实讲的不是很清楚,难免走了很多弯路
在使用行编辑功能的时候,有的字段不允许编辑, 比如说创建时间,后台自动生成,前台不允许编辑
试了很多方法没搞成,最后才发现,只要在初始化这个字段的时候,"editor"不设置即可,就是这么简单
在使用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;
好,为了解决这些问题,在官网例子的基础上,开始改造一个更通用的代码
四、准备工作
首先主页的的样式和用到的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" οnclick="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" οnclick="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" οnclick="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" οnclick="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>
点击(此处)折叠或打开
- <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));
- }
- }
只要传入不同的表名即可处理,这个就简单了,不做赘述。
补充一点:
由于刚使用easyui插件,很多方面处于摸索阶段,都是依靠官方的api文档
而api文档有的地方其实讲的不是很清楚,难免走了很多弯路
在使用行编辑功能的时候,有的字段不允许编辑, 比如说创建时间,后台自动生成,前台不允许编辑
试了很多方法没搞成,最后才发现,只要在初始化这个字段的时候,"editor"不设置即可,就是这么简单