首页 > 代码库 > EasyUI 可以编辑datagrid
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 </html>
public Object save(String inserted, String deleted, String updated) { System.out.println("inserted " + inserted); System.out.println("deleted " + deleted); System.out.println("updated " + updated); int sta = 0; try { //insert data if (inserted != null) { List<Menu> inserts = JSON.parseArray(inserted, Menu.class); menuDaoJpa.save(inserts); } //deleted data if (deleted != null) { List<Menu> deletes = JSON.parseArray(deleted, Menu.class); menuDaoJpa.delete(deletes); } //update data if (updated != null) { List<Menu> updates = JSON.parseArray(updated, Menu.class); for (Menu m : updates) { Menu existm = menuDaoJpa.findById(m.getId()); if (existm != null) { existm.setText(m.getText()); existm.setPid(m.getPid()); existm.setUrl(m.getUrl()); menuDaoJpa.flush(); } } } sta = 1; } catch (Exception ex) { ex.printStackTrace(); } finally { return sta; } }
1 @Id 2 @Column(name = "ID") 3 @GeneratedValue(strategy = GenerationType.AUTO) 4 private Long id; 5 6 @Column(name = "TEXT") 7 private String text; 8 9 @Column(name = "PID") 10 private Long pid; 11 12 @Column(name = "URL") 13 private String url; 14 ...
4.总结，datagrid可编辑，如果字段比较少的话推荐，这样就不需要增删改查分开进行。
EasyUI 可以编辑datagrid
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。