EasyUI启用行内编辑和动态增加行相关问题

最近在工作中遇到一个需求是需要在EasyUI datagrid列表启用行内编辑的,并且可以新增行、删除行,先看下页面效果:

 

 

双击或者单击启用编辑,点击新增动态增加行,勾选行(可多选)点击删除按钮可删除行,点击保存将数据保存到数据库,好了废话不多说,直接贴代码。

复制代码
 1 //定义编辑行的index
 2 var editIndex = undefined;
 3 
 4 //双击行启用编辑方法
 5 function doDblClickRow(rowIndex, rowData){
 6     
 7    //editIndex 有值时结束上一次编辑状态,开启当前行的编辑状态
 8     if (editIndex != undefined){
 9         $('#dataList').datagrid('selectRow', editIndex).datagrid('endEdit', editIndex);
10     }
11     editIndex = rowIndex;
12     $('#dataList').datagrid('selectRow', rowIndex).datagrid('beginEdit', rowIndex);
13 
14 }
15 
16 //新增
17 function doAdd(){
18     $('#dataList').datagrid('insertRow',{
19         row : {}
20     });
21 
22 }
23 
24 //要删除行的id
25 var ids = [];
26 
27 //删除
28 function doDelete(){
29     
30     //获取选中的行
31     var sel = $('#dataList').datagrid('getSelections');
32     for(var i = 0;i < sel.length;i++) {
33         var index = $('#dataList').datagrid('getRowIndex',sel[i]);
34         $('#dataList').datagrid('selectRow', index).datagrid('endEdit', index);
35 
36         //将删除的id放在数组种
37         if (typeof(sel[i].objId)!=undefined && sel[i].objId!='undefined') {
38             ids.push(sel[i].objId);
39         }
40 
41         //删除行
42         $('#dataList').datagrid('deleteRow',index);
43         //将editIndex重置为undefined
44         editIndex = undefined;
45     }
46 
47     $('#dataList').datagrid('clearSelections');
48 
49 }
50 
51 //保存方法
52 function doSave(){
53 
54     //定义一个数组容器接收列表每一行数据
55     var table_data_list=[];
56 
57     //获取所有行
58     var rows = $("#dataList").datagrid("getRows");
59     //遍历所有行
60     for(var i = 0;i < rows.length;i++) {
61         var index = $('#dataList').datagrid('getRowIndex',rows[i]);
62         //结束每一行的编辑状态
63         $('#dataList').datagrid('endEdit',index);
64         table_data_list.push(rows[i]);
65     }
66 
67     $.messager.confirm('信息提示','是否保存?', function(result){
68         var params = {
69             'table_data_list':table_data_list,
70             'ids':ids
71         };
72         var p =JSON.stringify(params);
73         console.log(p);
74         if(result){
75             $.ajax({
76                 url:ctx + "/config/save.do",
77                 type: 'POST',
78                 contentType: "application/json;charset=UTF-8",
79                 dataType:"json",
80                 data:p,
81                 success:function(result){
82                     if(result.status==1){
83                         $.messager.alert('信息提示','保存成功','info');
84                         $('#dataList').datagrid('reload');
85                     }
86                     else {
87                         $.messager.alert('信息提示','保存失败!','info');
88                     }
89                 }
90             });
91         }
92     });
93 
94 }
复制代码

 

posted @   程序猿小wang  阅读(894)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示