EasyUI效果--DataGrid的编辑效果

Posted 芜明-追星

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI效果--DataGrid的编辑效果相关的知识，希望对你有一定的参考价值。

 DataGrid的编辑效果是我目前使用的easyUI的第三个效果，相对于前两个，这个算是比较复杂点了。
    运行起来的效果，大概就是这样，任意点击某行，然后该行变为可以编辑的,失去焦点之后,该行恢复.点击上面的按钮Append,Remove,Accept,Reject,getChanges可以添加一行,删除一行,保存修改,撤销修改,获取改变的数据.
技术分享
    之前拿到官网的源码之后,进行测试.开始没细看代码,删了几列数据,包括Product列,就发现只有第一次点击数据会有编辑效果,并且之后不论怎么做都不会恢复到只读的样子.
技术分享
    后来,看代码发现,点击行时,会判断endEditing方法的返回值是否为true.
    分析代码,最开始editIndex编辑索引为undefined,假设我点击了第二行,那么editIndex为1.执行onClickRow()的方法,由于index为1 != undefined,所以执行判断endEditing(结束编辑)的方法是否为true,若结束,则将该选中行(第二行)执行beginEdit方法,并且将editIndex更新为1.若没有结束,则还是选中之前那行.
    而结束编辑方法,先判断editIndex是否为undefined,若是,则直接返回true,表示结束;若不是,假设我之前点击了第二行,然后再点击第三行,则目前是index为2,而editIndex为1.则判断第二行是否为有效行,不是就直接返回false,表示没有结束.否则,需要将该有效行的修改获取到值,其他还好说,但是下拉框需要获取到valueField和textFiled,所以根据valueField值字段,获取到第二行的productid的指定的编辑器ed ,并且获取该下拉框中的值textFiled,将该值赋到productname字段上,最后endEit结束编辑,并设置editIndex为undefined,并且返回true.
    简而言之,该方法的作用就是:结束之前的编辑,只是无效的结束不掉,有效的要先保存下再结束,而第一次选中行,那不管如何都是结束了.
    而删掉Product列之后,由于没有productid,所以ed为null,获取不到该字段的编辑器,然后$(ed.target)就抛异常TypeError: ed is null,执行else,返回false,endEditing不结束,所以就只能有一次编辑效果了.

[javascript] 
 
  1. <script type="text/javascript">  
  2.     var editIndex = undefined;  
  3.     function endEditing(){  
  4.         if (editIndex == undefined){return true}  
  5.         if ($(‘#dg‘).datagrid(‘validateRow‘, editIndex)){  
  6.             var ed = $(‘#dg‘).datagrid(‘getEditor‘, {index:editIndex,field:‘productid‘});  
  7.             var productname = $(ed.target).combobox(‘getText‘);  
  8.             $(‘#dg‘).datagrid(‘getRows‘)[editIndex][‘productname‘] = productname;  
  9.             $(‘#dg‘).datagrid(‘endEdit‘, editIndex);  
  10.             editIndex = undefined;  
  11.             return true;  
  12.         } else {  
  13.             return false;  
  14.         }  
  15.     }  
  16.     function onClickRow(index){  
  17.         if (editIndex != index){  
  18.             if (endEditing()){  
  19.                 $(‘#dg‘).datagrid(‘selectRow‘, index)  
  20.                         .datagrid(‘beginEdit‘, index);  
  21.                 editIndex = index;  
  22.             } else {  
  23.                 $(‘#dg‘).datagrid(‘selectRow‘, editIndex);  
  24.             }  
  25.         }  
  26.     }  

    然后是我的代码,先是html代码,效果是上图一样,只是字段和名字不同.

[html] 
  1. <!--查询主页面*******start************************************************************************ -->  
  2. <div title="查询规则" class="easyui-panel"  
  3.     style="padding: 20px; width: 100%">  
  4.     <input id="searchtxt" class="easyui-searchbox" style="width: 350px"  
  5.         searcher="doSearch" /> <a href="javascript:void(0)"  
  6.         class="easyui-linkbutton" data-options="iconCls:‘icon-search‘"  
  7.         onclick="doSearchButton()" style="width: 80px">查询</a>  
  8. </div>  
  9. <table id="dg" title="规则列表" class="easyui-datagrid"  
  10.     url="${pageContext.request.contextPath}/queryPageRule"  
  11.     style="width: 100%; height: 450px" toolbar="#toolbar"  
  12.     pagination="true" rownumbers="true" fitColumns="true" sortName="sort"  
  13.     sortOrder="asc" remoteSort=false singleSelect="true"  
  14.     data-options="iconCls: ‘icon-edit‘,onClickRow: onClickRow">  
  15.     <thead>  
  16.         <tr>  
  17.                    <th data-options="field:‘id‘,width:30,hidden:‘hidden‘">规则id</th>  
  18.             <th  
  19.                 data-options="field:‘rule‘,width:30,  
  20.                     formatter:function(value,row){  
  21.                         return row.rule;  
  22.                     },  
  23.                     editor:{  
  24.                         type:‘combobox‘,  
  25.                         options:{  
  26.                             valueField:‘rule‘,  
  27.                             textField:‘rule‘,  
  28.                             url:‘rule1.json‘,   
  29.                             method:‘get‘,  
  30.                             required:true  
  31.                         }  
  32.                     }">规则</th>  
  33.             <th  
  34.                 data-options="field:‘type‘,width:30,  
  35.                         formatter:function(value,row){    
  36.                             return row.type;    
  37.                         },   
  38.                         editor:{    
  39.                         type:‘combobox‘,  
  40.                         options:{  
  41.                             valueField:‘type‘,  
  42.                             textField:‘type‘,  
  43.                             method:‘get‘,  
  44.                             url:‘ruleType.json‘,  
  45.                             required:true  
  46.                               
  47.                         }  
  48.                     }">类型</th>  
  49.   
  50.   
  51.             <th data-options="field:‘sort‘,align:‘right‘,width:30">优先级</th>  
  52.             <th  
  53.                 data-options="field:‘startIndex‘,width:30,align:‘right‘,editor:{type:‘numberbox‘}">起始位置</th>  
  54.             <th  
  55.                 data-options="field:‘length‘,width:30,align:‘right‘,editor:{type:‘numberbox‘}">长度</th>  
  56.             <th  
  57.                 data-options="field:‘realLength‘,width:30,align:‘right‘,editor:{type:‘numberbox‘}">原长度</th>  
  58.             <th data-options="field:‘result‘,width:30,editor:‘text‘">效果</th>  
  59.             <th  
  60.                 data-options="field:‘isValid‘,formatter:formatValid,width:20,align:‘center‘,editor:{type:‘checkbox‘,options:{on:‘启用‘,off:‘停用‘}}">是否启用</th>  
  61.   
  62.   
  63.         </tr>  
  64.     </thead>  
  65. </table>  
  66. <div id="toolbar" width="50">  
  67.     <a href="javascript:void(0)" class="easyui-linkbutton"  
  68.         data-options="iconCls:‘icon-add‘,plain:true" onclick="append()">添加</a>  
  69.     <a href="javascript:void(0)" class="easyui-linkbutton"  
  70.         data-options="iconCls:‘icon-remove‘,plain:true" onclick="removeit()">删除</a>  
  71.     <a href="javascript:void(0)" class="easyui-linkbutton"  
  72.         data-options="iconCls:‘icon-edit‘,plain:true" onclick="MoveUp()">上移</a>  
  73.     <a href="javascript:void(0)" class="easyui-linkbutton"  
  74.         data-options="iconCls:‘icon-edit‘,plain:true" onclick="MoveDown()">下移</a>  
  75.     <a href="javascript:void(0)" class="easyui-linkbutton"  
  76.         data-options="iconCls:‘icon-save‘,plain:true" onclick="accept()">保存</a>  
  77.     <a href="javascript:void(0)" class="easyui-linkbutton"  
  78.         data-options="iconCls:‘icon-undo‘,plain:true" onclick="reject()">撤销</a>  
  79.     <a href="javascript:void(0)" class="easyui-linkbutton"  
  80.         data-options="iconCls:‘icon-undo‘,plain:true" onclick="saveUpDow()">保存优先级</a>  
  81.   
  82.   
  83. </div>  
  84. <!--查询主页面*******end************************************************************************ -->  

    主要是这样的,首先规则和类型列都是下拉框列,优先级列不议不可编辑;起始位置,长度和原长度的编辑器都是可编辑的数字框,效果是文本框,而是否启用显示的是中文"启用","停用".而按钮,除了正常的添加,删除,保存和撤销,还有上移和下移,以及保存优先级,这三个按钮是用来处理优先级的.
    其中,添加方法,就是在结束之前的编辑之后,添加一行,其中isValid行设置默认为"启用",而sort优先级和该表的数据行数一样.而editIndex编辑索引,假设现在有8行,再加一行为9行,则sort为9.appendRow执行完之后,datagrid就是9条数据了,而编辑索引应该为8.

[javascript] 
  1. function append() {  
  2.     if (endEditing()) {  
  3.         $(‘#dg‘).datagrid(‘appendRow‘, {  
  4.             isValid : ‘启用‘,  
  5.             sort:$(‘#dg‘).datagrid(‘getRows‘).length + 1,  
  6.         });  
  7.         editIndex = $(‘#dg‘).datagrid(‘getRows‘).length - 1;  
  8.         $(‘#dg‘).datagrid(‘selectRow‘, editIndex).datagrid(‘beginEdit‘,  
  9.                 editIndex);  
  10.     }  
  11. }  

    移除一行,先选中一行,然后取消对该行的编辑,然后删了该行,并将编辑索引清了.

[javascript] 
  1. function removeit() {  
  2.     if (editIndex == undefined) {  
  3.         return  
  4.     }  
  5.     $(‘#dg‘).datagrid(‘cancelEdit‘, editIndex).datagrid(‘deleteRow‘,  
  6.             editIndex);  
  7.     editIndex = undefined;  
  8. }  

    撤销修改,则将所有没有保存的数据,进行还原.

[javascript] view plain copy
 
 技术分享技术分享
  1. function reject() {  
  2.     $(‘#dg‘).datagrid(‘rejectChanges‘);   
  3.     editIndex = undefined;  
  4. }  

    而提交数据,将之前修改的结果进行持久化保存.还是先结束之前的编辑,然后获取到所有修改,添加,删除和修改的.将所有修改中的isValid的启用改为true,因为后台该字段为boolean类型.并将所有的添加,删除和修改的结果都用JSON.stringify处理,将数据通过Contoller处理,最后用acceptChanges提交所有修改.

[javascript] 
  1. function accept() {  
  2.     if (endEditing()) {   
  3.                 //利用easyui控件本身的getChange获取新添加，删除，和修改的内容    
  4.                 if ($("#dg").datagrid(‘getChanges‘).length) {    
  5.                     var inserted = $("#dg").datagrid(‘getChanges‘, "inserted");    
  6.                     var deleted = $("#dg").datagrid(‘getChanges‘, "deleted");    
  7.                     var updated = $("#dg").datagrid(‘getChanges‘, "updated");  
  8.                   
  9.                     var effectRow = new Object();    
  10.                     if (inserted.length) {   
  11.                         inserted.forEach(function(e){    
  12.                             if(e.isValid == "启用") {  
  13.                                 e.isValid = true;  
  14.                             }else {  
  15.                                 e.isValid = false;  
  16.                             }   
  17.                         })    
  18.                         effectRow["inserted"] = JSON.stringify(inserted);    
  19.                     }    
  20.                     if (deleted.length) {    
  21.                         deleted.forEach(function(e){    
  22.                             if(e.isValid == "启用") {  
  23.                                 e.isValid = true;  
  24.                             }else {  
  25.                                 e.isValid = false;  
  26.                             }   
  27.                         })    
  28.                         effectRow["deleted"] = JSON.stringify(deleted);    
  29.                     }    
  30.                     if (updated.length) {    
  31.                         updated.forEach(function(e){    
  32.                             if(e.isValid == "启用") {  
  33.                                 e.isValid = true;  
  34.                             }else {  
  35.                                 e.isValid = false;  
  36.                             }   
  37.                         })    
  38.                           
  39.                         effectRow["updated"] = JSON.stringify(updated);    
  40.                     }   
  41.                     $.post("${pageContext.request.contextPath}/add", effectRow, function(rsp) {  
  42.                         if(rsp.status){  
  43.                             $.messager.alert("提示", "提交成功！");  
  44.                             $dg.datagrid(‘acceptChanges‘);  
  45.                         }  
  46.                     }, "JSON").error(function() {  
  47.                         $.messager.alert("提示", "提交错误！");  
  48.                     });  
  49.                 
  50.                  }else {  
  51.                      var updown = $("#dg").datagrid(‘getData‘);  
  52.                      if (updown.length) {    
  53.                          updown.forEach(function(e){    
  54.                             if(e.isValid == "启用") {  
  55.                                 e.isValid = true;  
  56.                             }else {  
  57.                                 e.isValid = false;  
  58.                             }   
  59.                         })    
  60.                      $.post("${pageContext.request.contextPath}/add", function(rsp) {  
  61.                          if(rsp.status){  
  62.                              $.messager.alert("提示", "提交成功！");  
  63.                              $dg.datagrid(‘acceptChanges‘);  
  64.                          }  
  65.                      }, "JSON").error(function() {  
  66.                          $.messager.alert("提示", "提交错误！");  
  67.                      });  
  68.                  }  
  69.             }  
  70.         }  
  71.     }  

    而对于优先级的修改,是这样处理的.上移和下移按钮分别执行MoveUp和MoveDown方法,获取到当前选中行,以及该行的索引,执行mysort方法,传入当前行的索引,以及‘up‘指令,以及对应的datagrid名.同理moveDown一样,只是指令为‘down‘.

[javascript] 
  1. //上移  
  2. function MoveUp() {  
  3.     var row = $("#dg").datagrid(‘getSelected‘);   
  4.     var index = $("#dg").datagrid(‘getRowIndex‘, row);  
  5.     mysort(index, ‘up‘, ‘dg‘);   
  6.     editIndex = undefined;  
  7. }  
  8. //下移  
  9. function MoveDown() {  
  10.     var row = $("#dg").datagrid(‘getSelected‘);  
  11.     var index = $("#dg").datagrid(‘getRowIndex‘, row);  
  12.     mysort(index, ‘down‘, ‘dg‘);      
  13.     editIndex = undefined;  
  14. }  

    而mysort方法,是这样处理的,若为up,则根据传入的index和datagrid的名字获取到本行以及上一行的数据,将本行和上一行的数据进行交换,并且刷新,然后还是选中之前的行.而优先级的值,是和行号保持一致的.down同理.

[javascript] 
  1. function mysort(index, type, gridname) {  
  2.     if ("up" == type) {  
  3.         if (index != 0) {  
  4.             //本行  
  5.             var toup = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index];  
  6.             //上一行  
  7.             var todown = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index - 1];  
  8.             //本行的sort-1,本行的上一行的sort+1 (如8(index为7),上移为7;则原来的7,变为8)  
  9.             toup.sort = index;  
  10.             todown.sort = index+1;  
  11.             $(‘#‘ + gridname).datagrid(‘getData‘).rows[index] = todown;  
  12.             $(‘#‘ + gridname).datagrid(‘getData‘).rows[index - 1] = toup;  
  13.             $(‘#‘ + gridname).datagrid(‘refreshRow‘, index);  
  14.             $(‘#‘ + gridname).datagrid(‘refreshRow‘, index - 1);  
  15.             $(‘#‘ + gridname).datagrid(‘selectRow‘, index - 1);  
  16.         }  
  17.     } else if ("down" == type) {  
  18.         var rows = $(‘#‘ + gridname).datagrid(‘getRows‘).length;  
  19.         if (index != rows - 1) {  
  20.             //本行  
  21.             var todown = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index];  
  22.             //下一行  
  23.             var toup = $(‘#‘ + gridname).datagrid(‘getData‘).rows[index + 1];  
  24.             //本行的sort+1,本行的上一行的sort-1 (如8(index为7),下移为9;则原来的9,变为8)  
  25.             toup.sort = index + 1;  
  26.             todown.sort = index + 2;  
  27.             $(‘#‘ + gridname).datagrid(‘getData‘).rows[index + 1] = todown;  
  28.             $(‘#‘ + gridname).datagrid(‘getData‘).rows[index] = toup;  
  29.             $(‘#‘ + gridname).datagrid(‘refreshRow‘, index);  
  30.             $(‘#‘ + gridname).datagrid(‘refreshRow‘, index + 1);  
  31.             $(‘#‘ + gridname).datagrid(‘selectRow‘, index + 1);  
  32.         }  
  33.     }  
  34.   
  35.   
  36. }<span style="font-family: KaiTi_GB2312; background-color: rgb(255, 255, 255);">      </span>  

   而保存就是将所有的数据都获取到,进行保存.
   后台contoller中如何处理数据?将数据传到后台后,从request获取到值,用JsonUntils的fromJson方法将数据从json转为实体list.然后更新实体list.

[javascript] 

    1. /** 
    2.  * 添加规则 
    3.  * 
    4.  * @param rule 
    5.  * @param response 
    6.  */  
    7. @RequestMapping("/add")  
    8. public void addRule(Rule rule, Object effectRow, HttpServletRequest request, HttpServletResponse response) {  
    9.     logger.info("Controller开始执行添加规则的方法");  
    10.     // 获取编辑数据 这里获取到的是json字符串  
    11.           String updown = request.getParameter("updown");  
    12.                   boolean flagUpdown = false;  
    13.   
    14.     if (updown != null) {  
    15.         listUpdown = (List<Rule>) JsonUtils.fromJson(updown, new TypeToken<List<Rule>>() {  
    16.         }.getType());  
    17.         flagUpdated = ruleBean.updateEntitys(listUpdown);  
    18.     }  
    19.   
    20.   
    21.     try {  
    22.         try {  
    23.             jacksonJsonUntil.BeanToJson(response, flagUpdown);  
    24.         } catch (Exception e) {  
    25.             e.printStackTrace();  
    26.         }  
    27.     } catch (Exception e) {  
    28.         logger.error("Controller的添加规则失败", e);  
    29.         throw e;  
    30.     }  
    31.   
    32.   
    33.     logger.info("Controller执行完成添加规则的方法");  
    34. }  

以上是关于EasyUI效果--DataGrid的编辑效果的主要内容，如果未能解决你的问题，请参考以下文章

EasyUI 可以编辑datagrid

easyui datagrid可编辑表格使用经验分享

easyui datagrid 动态加入移除editor

EasyUi datagrid鼠标的悬停效果

JS-easyui 扩展easyui.datagrid，添加数据loading遮罩效果代码

easyui datagrid 单选框 效果