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 }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步