jQueryEasyUi行编辑打造增删改查

http://uule.iteye.com/blog/1883067

jQueryEasyUi行编辑打造增删改查

博客分类：
 

问题：

直接删除后，已删除行下面所有行的Index可能不正确，所以我的解决方法是新增时定义一个当前时间Id，然后每次点击后面的操作按钮时，jQuery获取当前行Id，然后selectRecord获得当前行真实Index

 

注意：需为Datagrid定义IdField，否则selectRecord不会起作用，很坑爹的问题...



 

Java代码  收藏代码
  1. var $obj;  
  2. $(function() {  
  3.     $obj = $("#configQueryGrid");  
  4.     $obj.datagrid({  
  5.         loadMsg : '数据加载中请稍后……',  
  6.         url : root + 'esbService/sysConfigQuery.do',  
  7.         //url : root + 'js/app/sysManagement/sysConfig.json',  
  8.         fitColumns : true,  
  9.         autoRowHeight : true,  
  10.         pagination : true,  
  11.         pagePosition : 'bottom',  
  12.         pageSize : 10,  
  13.         toolbar: '#configTb',  
  14.         pageList : [ 10, 20, 30 ],  
  15.         border : false,  
  16.         singleSelect:true,  
  17.         idField:'id',  
  18.         columns : [ [ {  
  19.                 field : 'id',  
  20.                 title : 'ID',  
  21.                 hidden : true  
  22.             },{  
  23.                 field : 'configName',  
  24.                 title : "标识",  
  25.                 width : 200,  
  26.                 editor : 'text',  
  27.                 sortable : true  
  28.             }, {  
  29.                 field : 'configNameCn',  
  30.                 title : "名称",  
  31.                 editor : 'text',  
  32.                 width : 200,  
  33.                 sortable : true  
  34.             }, {  
  35.                 field : 'configType',  
  36.                 title : "类型",  
  37.                 editor : 'text',  
  38.                 width : 200,  
  39.                 sortable : true  
  40.             }, {  
  41.                 field : 'configValue',  
  42.                 title : "值",  
  43.                 editor : 'text',  
  44.                 width : 200,  
  45.                 sortable : true  
  46.             }, {  
  47.                 field : 'opt',  
  48.                 title : "详情",  
  49.                 width : 150,  
  50.                 align : 'center',  
  51.                 formatter:function(value,row,index){  
  52.                     if (row.editing){  
  53.                         var s = '<a href="#" class="ope-save" onclick="saverow('+index+',this)">保存</a> ';  
  54.                         var c = '<a href="#" class="ope-cancel" onclick="cancelrow('+index+',this)">取消</a>';  
  55.                         return s+c;  
  56.                     } else {  
  57.                         var e = '<a href="#" class="ope-edit" onclick="editrow('+index+',this)">修改</a> ';  
  58.                         var d = '<a href="#" class="ope-remove" onclick="deleterow('+index+',this)">删除</a>';  
  59.                         return e+d;  
  60.                     }  
  61.                 }  
  62.         } ] ],  
  63.         onLoadSuccess : function(data) {  
  64.   
  65.         },  
  66.         onBeforeEdit:function(index,row){  
  67.             row.editing = true;  
  68.             $obj.datagrid('refreshRow', index);  
  69.         },  
  70.         onAfterEdit:function(index,row){  
  71.             row.editing = false;  
  72.             $obj.datagrid('refreshRow', index);  
  73.         },  
  74.         onCancelEdit:function(index,row){  
  75.             row.editing = false;  
  76.             $obj.datagrid('refreshRow', index);  
  77.         }  
  78.     });  
  79.   
  80. });  
  81.   
  82.     function selectCurRow(obj){  
  83.         var $a = $(obj);  
  84.         var $tr = $a.parent().parent().parent();  
  85.         var tmpId = $tr.find("td:eq(0)").text();  
  86.         $obj.datagrid('selectRecord', tmpId);  
  87.     }  
  88.       
  89.     function getIndexAfterDel(){  
  90.         var selected = $obj.datagrid('getSelected');  
  91.         var index = $obj.datagrid('getRowIndex', selected);  
  92.         return index;  
  93.     }  
  94.       
  95.     function editrow(index,obj){  
  96.         selectCurRow(obj);  
  97.           
  98.         var tmpIndex = getIndexAfterDel();    
  99.         $obj.datagrid('beginEdit', tmpIndex);  
  100.     }  
  101.       
  102.     function deleterow(index,obj){  
  103.         $.messager.confirm('Confirm','确认删除?',function(r){  
  104.             if (r){               
  105.                 selectCurRow(obj);  
  106.                 var index = getIndexAfterDel();  
  107.                 var node = $obj.datagrid('getSelected');  
  108.                 var id = node.id;   
  109.                 $.ajax({  
  110.                     url : root + 'esbService/removeSysConfig.do?id='+id,  
  111.                     type : 'GET',                     
  112.                     timeout : 60000,  
  113.                     success : function(data, textStatus, jqXHR) {     
  114.                         var msg = '删除';  
  115.                         if(data == 'pageData') {  
  116.                             $obj.datagrid('deleteRow', index);  
  117.                             return;  
  118.                         }else if (data == "success") {  
  119.                             $obj.datagrid('deleteRow', index);  
  120.                             //$obj.datagrid('reload');  
  121.                             $.messager.alert('提示', msg + '成功！', 'info', function() {  
  122.                                 //window.location.href = root + 'esbService/initSysConfig.do';  
  123.                             });  
  124.                         } else {  
  125.                             $.messager.alert('提示', msg + '失败！', 'error', function() {  
  126.                                 //window.location.href = root + 'esbService/initSysConfig.do';  
  127.                             });  
  128.                         }  
  129.                     }  
  130.                 });   
  131.                   
  132.             }  
  133.         });  
  134.     }  
  135.     function saverow(index,obj){  
  136.         selectCurRow(obj);  
  137.         var tmpIndex = getIndexAfterDel();    
  138.         $obj.datagrid('endEdit', tmpIndex);  
  139.         var node = $obj.datagrid('getSelected');  
  140.         //var data = JSON.stringify(node);  
  141.         var json = {};  
  142.         json.id = node.id;  
  143.         json.configName = node.configName;  
  144.         json.configNameCn = node.configNameCn;  
  145.         json.configType   = node.configType;  
  146.         json.configValue  = node.configValue;  
  147.         $.ajax({  
  148.             url : root + 'esbService/editOrSaveSysConfig.do',  
  149.             type : 'POST',  
  150.             data : json,  
  151.             timeout : 60000,  
  152.             success : function(data, textStatus, jqXHR) {     
  153.                 var msg = '';  
  154.                 if (data == "success") {  
  155.                     $.messager.alert('提示', '保存成功！', 'info', function() {  
  156.                         $obj.datagrid('refreshRow', tmpIndex);  
  157.                     });  
  158.                 } else{  
  159.                     if(data == "illegal"){  
  160.                         msg = "请输入数据！";  
  161.                     }else if(data == "duplicate"){  
  162.                         msg = "该标识已存在！";  
  163.                     }else{  
  164.                         msg = "保存失败！";  
  165.                     }  
  166.                     $.messager.alert('提示', msg , 'error', function() {  
  167.                         $obj.datagrid('beginEdit', tmpIndex);  
  168.                     });  
  169.                 }                     
  170.   
  171.             }  
  172.         });  
  173.           
  174.     }  
  175.     function cancelrow(index,obj){  
  176.         selectCurRow(obj);  
  177.         var tmpIndex = getIndexAfterDel();    
  178.         $obj.datagrid('cancelEdit', tmpIndex);  
  179.     }  
  180.       
  181.     function appendRow(){  
  182.         $obj.datagrid('appendRow',{  
  183.             id: new Date().getTime(),  
  184.             configName: '',  
  185.             configNameCn: "",  
  186.             configType: "",  
  187.             configValue:"",  
  188.             opt:""  
  189.         });  
  190.           
  191.         var length = $obj.datagrid("getRows").length;  
  192.         if(length > 0){  
  193.             editIndex = length - 1;  
  194.         }else{  
  195.             editIndex = 0;  
  196.         }         
  197.         //$obj.datagrid("selectRow", editIndex);  
  198.         $obj.datagrid("beginEdit", editIndex);  
  199.     }  
  200.       
  201.       

 

Java代码  收藏代码
  1. /* 
  2.      * 全局设置 
  3.      */  
  4.     @RequestMapping(value = "esbService/editOrSaveSysConfig.do", method = RequestMethod.POST)  
  5.     @ResponseBody  
  6.     public String editOrSaveSysConfig(SysConfig sysConfig) {  
  7.         if(sysConfig == null) return null;  
  8.         String message = "";  
  9.         try{  
  10.             message = sysConfigDS.editOrSaveSysConfig(sysConfig);  
  11.         }catch(Exception e){  
  12.             return "fail";  
  13.         }  
  14.           
  15.         return message;  
  16.     }  
  17.       
  18.     @RequestMapping(value = "esbService/removeSysConfig.do", method = RequestMethod.GET)  
  19.     @ResponseBody  
  20.     public String removeSysConfig(@RequestParam Long id) {  
  21.         if(id == null) return null;  
  22.         SysConfig es = sysConfigDS.getSysConfigById(id);  
  23.         String message = "";  
  24.           
  25.         if(null != es){           
  26.             try{  
  27.                 sysConfigDS.remove(id);  
  28.                 message = "success";      
  29.             }catch(Exception e){  
  30.                 return "fail";  
  31.             }  
  32.         }else{  
  33.             message = "pageData";  
  34.         }  
  35.               
  36.         return message;  
  37.     }  

 

Java代码  收藏代码
  1. public Boolean isIllegalData(SysConfig sys){  
  2.         if(StringUtils.isBlank(sys.getConfigName())  
  3.                 || StringUtils.isBlank(sys.getConfigType())  
  4.                 || StringUtils.isBlank(sys.getConfigValue())){  
  5.             return true;  
  6.         }  
  7.         return false;  
  8.     }  
  9.       
  10.     public Boolean checkSysConfigExist(String name){  
  11.         SysConfig es = getSysConfigByName(name.trim());  
  12.         if(es != null) return true;  
  13.         return false;  
  14.     }  
  15.       
  16.     @Override  
  17.     @Transactional  
  18.     public String editOrSaveSysConfig(SysConfig sysConfig) {  
  19.         SysConfig es = getSysConfigById(sysConfig.getId());  
  20.         String message = "";  
  21.         if(isIllegalData(sysConfig)){  
  22.             message = "illegal";  
  23.         }else{  
  24.             if(null == es){//判断是否新增  
  25.                 if(checkSysConfigExist(sysConfig.getConfigName())){  
  26.                     message = "duplicate";  
  27.                 }else{  
  28.                     sysConfig.setId(null);  
  29.                     save(sysConfig);  
  30.                     message = "success";  
  31.                 }  
  32.             }else{//更新  
  33.                 SysConfig dbEs = getSysConfigByName(sysConfig.getConfigName().trim());  
  34.                 if(checkSysConfigExist(sysConfig.getConfigName())  
  35.                         && es.getId() != dbEs.getId()){  
  36.                     message = "duplicate";  
  37.                 }else{  
  38.                     update(sysConfig);  
  39.                     message = "success";  
  40.                 }  
  41.             }  
  42.         }  
  43.           
  44.         return message;  
  45.     }  

 That's all .

 

 Jquery easyui 可编辑表格的保存方法
Java代码  收藏代码
  1. {  
  2.                 id : 'btnsave',  
  3.                 text : '保存',  
  4.                 disabled : true,  
  5.                 iconCls : 'icon-save',  
  6.                 handler : function() {  
  7.                     if (lastEditIndex != undefined) {  
  8.                         $('#tt').datagrid('endEdit', lastEditIndex);  
  9.                     }  
  10.   
  11.                     var insertRows = $('#tt').datagrid('getChanges','inserted');  
  12.                     var updateRows = $('#tt').datagrid('getChanges','updated');  
  13.                     var deleteRows = $('#tt').datagrid('getChanges','deleted');  
  14.                     var changesRows = {  
  15.                             inserted : [],  
  16.                             updated : [],  
  17.                             deleted : [],  
  18.                             };  
  19.         if (insertRows.length>0) {  
  20.             for (var i=0;i<insertRows.length;i++) {  
  21.                 delete insertRows[i].editing;  
  22.                 changesRows.inserted.push(insertRows[i]);  
  23.             }  
  24.         }  
  25.   
  26.         if (updateRows.length>0) {  
  27.             for (var k=0;k<updateRows.length;k++) {  
  28.                 delete updateRows[k].editing;  
  29.                 changesRows.updated.push(updateRows[k]);  
  30.             }  
  31.         }  
  32.           
  33.         if (deleteRows.length>0) {  
  34.             for (var j=0;j<deleteRows.length;j++) {  
  35.                 delete deleteRows[j].editing;  
  36.                 changesRows.deleted.push(deleteRows[j]);  
  37.             }  
  38.         }  
  39.   
  40.                     alert(JSON.stringify(changesRows));  
  41.   
  42.   
  43.                     // 保存成功后，可以刷新页面，也可以：  
  44.                     $('#tt').datagrid('acceptChanges');  
  45.                       
  46.                     // 并且禁止保存、还原按钮  
  47.                     $('#btnsave').linkbutton('disable');  
  48.                     $('#btnreject').linkbutton('disable');  
  49.                 }  
  50.             }  

 JQuery EasyUI datagrid 批量编辑和提交

 

 

参考：

jquery-easyui 中表格的行编辑功能

学习Jquery EasyUI的添加，修改，删除，查询等基本操作

JQueryEasyUI学习笔记（十）datagrid 添加、修改、删除

 jquery-easyui中表格的行编辑功能(javaeye)
 

 jQuery Easyui的datagrid可编辑，多列之间的级联操作

 当Product Id列的值改变的时候，把当前列List Price的值设置成2012.

Java代码  收藏代码
  1. {  
  2.                     field : 'productid',  
  3.                     title : 'Product ID',  
  4.                     width : 120,  
  5.                     formatter : productFormatter,  
  6.                     editor : {  
  7.                         type : 'combobox',  
  8.                         options : {  
  9.                             valueField : 'productid',  
  10.                             textField : 'name',  
  11.                             data : products,  
  12.                             required : true,  
  13.                             onChange : function (newValue, oldValue) {  
  14.                 //重点在此处   
  15.                 //先获取到当前选中行  
  16.                 //根据当前行获取，当前行的下标  
  17.                 //在根据下标和要获取列的filed获取对应filed的Editor对象  
  18.                 //然后在根据对应的Editor操作  
  19.                                 var row = $dg.datagrid('getSelected');  
  20.                                 var rindex = $dg.datagrid('getRowIndex', row);  
  21.                                 var ed = $dg.datagrid('getEditor', {  
  22.                                         index : rindex,  
  23.                                         field : 'listprice'  
  24.                                     });  
  25.                                 $(ed.target).numberbox('setValue', '2012');  
  26.                             }  
  27.                         }  
  28.                     }  

 。。

posted on 2015-11-23 21:59  wdcwy  阅读(1778)  评论(0)  编辑  收藏  举报

导航