EasyUI 可以编辑datagrid
Posted 咕噜平子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI 可以编辑datagrid相关的知识，希望对你有一定的参考价值。
1.主要用到的技术：前端easyui，后台是Spring MVC，Spring data Jpa等。
2.效果展示
3.局部代码展示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 3 <html> 4 <head> 5 <% 6 String path = request.getContextPath(); 7 %> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 9 <title>Menu</title> 10 <%@include file="/jsp/resource.jsp" %> 11 </head> 12 <body> 13 <div style="margin:10px 0;"></div> 14 <table id="dg" class="easyui-datagrid" title="菜单可编辑列表" style="width:700px;height:auto" 15 data-options=" 16 iconCls: \'icon-edit\', 17 singleSelect: true, 18 toolbar: \'#tb\', 19 url: \'/csmisws/menu/datas.do\', 20 onClickRow: onClickRow 21 "> 22 <thead> 23 <tr> 24 <th data-options="field:\'id\',width:100">编号</th> 25 <th data-options="field:\'text\',width:180,align:\'right\',editor:\'text\'">名称</th> 26 <th data-options="field:\'pid\',width:155,align:\'right\',editor:\'numberbox\'">父编号</th> 27 <th data-options="field:\'url\',width:200,align:\'right\',editor:\'text\'">链接</th> 28 </th> 29 </tr> 30 </thead> 31 </table> 32 33 <div id="tb" style="height:auto"> 34 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-add\',plain:true" 35 onclick="append()">添加</a> 36 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-remove\',plain:true" 37 onclick="removew()">删除</a> 38 <%--<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-save\',plain:true"--%> 39 <%--onclick="accept()">接受改变</a>--%> 40 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-undo\',plain:true" 41 onclick="reject()">撤销改变</a> 42 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-save\',plain:true" 43 onclick="getChanges()">永久保存改变</a> 44 </div> 45 <script type="text/javascript"> 46 var editIndex = undefined; 47 function endEditing() { 48 if (editIndex == undefined) { 49 return true 50 } 51 if ($(\'#dg\').datagrid(\'validateRow\', editIndex)) { 52 var ed = $(\'#dg\').datagrid(\'getEditor\', {index: editIndex, field: \'text\'}); 53 alert(ed); 54 var text = $(ed.target).val(); 55 $(\'#dg\').datagrid(\'getRows\')[editIndex][\'text\'] = text; 56 $(\'#dg\').datagrid(\'endEdit\', editIndex); 57 editIndex = undefined; 58 return true; 59 } else { 60 return false; 61 } 62 } 63 function onClickRow(index) { 64 if (editIndex != index) { 65 if (endEditing()) { 66 $(\'#dg\').datagrid(\'selectRow\', index) 67 .datagrid(\'beginEdit\', index); 68 editIndex = index; 69 } else { 70 $(\'#dg\').datagrid(\'selectRow\', editIndex); 71 } 72 } 73 } 74 function append() { 75 if (endEditing()) { 76 $(\'#dg\').datagrid(\'appendRow\', {status: \'P\'}); 77 editIndex = $(\'#dg\').datagrid(\'getRows\').length - 1; 78 $(\'#dg\').datagrid(\'selectRow\', editIndex) 79 .datagrid(\'beginEdit\', editIndex); 80 } 81 } 82 function removew() { 83 if (editIndex == undefined) { 84 return 85 } 86 $(\'#dg\').datagrid(\'cancelEdit\', editIndex) 87 .datagrid(\'deleteRow\', editIndex); 88 editIndex = undefined; 89 } 90 // function accept() { 91 // if (endEditing()) { 92 // $(\'#dg\').datagrid(\'acceptChanges\'); 93 // } 94 // } 95 function reject() { 96 $(\'#dg\').datagrid(\'rejectChanges\'); 97 editIndex = undefined; 98 } 99 function getChanges() { // save the changed data to the database. 100 endEdit();// 获取编辑过的信息，需要结束编辑状态 101 var rows = $(\'#dg\').datagrid(\'getChanges\'); 102 if (rows.length) { 103 var inserted = $(\'#dg\').datagrid(\'getChanges\', "inserted"); 104 var deleted = $(\'#dg\').datagrid(\'getChanges\', "deleted"); 105 var updated = $(\'#dg\').datagrid(\'getChanges\', "updated"); 106 // 打包整理修改过的数据 107 var effectRow = new Object(); 108 if (inserted.length) { 109 effectRow["inserted"] = JSON.stringify(inserted); 110 } 111 if (deleted.length) { 112 effectRow["deleted"] = JSON.stringify(deleted); 113 } 114 if (updated.length) { 115 effectRow["updated"] = JSON.stringify(updated); 116 } 117 // alert(JSON.stringify(effectRow)); 118 // 提交数据至后台数据库 119 $.ajax({ 120 url: "/csmisws/menu/savedata.do", 121 type: "POST", 122 data: effectRow, 123 dataTyoe: "JSON", 124 success: function () { 125 $.messager.alert("提示", "提交成功了！"); 126 $(\'#dg\').datagrid(\'acceptChanges\'); 127 }, error: function () { 128 $.messager.alert("提示", "提交错误了！"); 129 $(\'#dg\').datagrid(\'acceptChanges\'); 130 } 131 }); 132 } 133 } 134 135 function endEdit() { 136 var rows = $(\'#dg\').datagrid(\'getRows\'); 137 for (var i = 0; i < rows.length; i++) { 138 $(\'#dg\').datagrid(\'endEdit\', i); 139 } 140 editIndex = undefined; 141 } 142 </script> 143 </body> 144 easyui datagrid 单元格关闭编辑框再开启编辑框就报错