jQueryEasyUi行编辑打造增删改查

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

jQueryEasyUi行编辑打造增删改查

• 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 .

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 添加、修改、删除

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.                     }