easyui开启行编辑_增删改操作及新增就能编辑

下面这个是一个单独的js文件,可以直接在页面引入他就可以用了

主要有三种方式实现编辑模式增删改操作

1.直接双击选中编辑

2.选中行点击修改按钮编辑

3.右键选择相关的操作

可能中间有部分功能没有实现

[html]  view plain  copy

 print ?

1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
2.   
3.   
4. <!-- 引入自定义的js文件 -->  
5. <script type="text/javascript" src="${pageContext.request.contextPath}/js/Myutil.js"></script>  
6.   
7. <script type="text/javascript">  
8.   
9. var datagrid;  
10. $(function() {  
11.   
12. editRow = undefined ; //保存当前正在编辑的行,控制同一时间只开启一行  
13.   
14. $('#datagrid').datagrid({  
15. rowStyler : function(rowIndex,rowData){   //行样式  
16. console.info(rowData.name);  
17. if(rowData.name == '张三丰'){  
18. return '';       //让张三丰这一行不显示样式  
19. }  
20. return 'background-color:#6293BB;  font-weight:bold; height:150px';  
21. },  
22. //url和columns属性必须要有  
23. //后台响应数据的地址,返回JSON字符串来填充grid  
24. url : '${pageContext.request.contextPath}/student/all',  
25. title : '学生列表',  
26. iconCls : 'icon-save',  
27. pagination : true, //分页工具条   
28. pageSize : 10, //每页显示的大小,联合pageList一起用  
29. pageList : [ 10, 20, 30, 40 ],  
30. fit : true, //随着里里面的宽高自适应  
31. fitColumns : false, //设置成true填充满整个grid的宽,列多时设置为false,grid太窄时有横向滚动条  
32. nowarp : false, //一行内容太长时可以自动换行全部显示出来  
33. border : false,  
34. idField : 'id', //通过主键找到对应的记录  
35. sortName : 'name', //默认用name来进行排序  
36. sortOrder : 'desc', //排序的种类   
37. frozenColumns: [ [ {   //冻结列,此时fitColumns不能设置成true,否则没有效果  
38. title : '',  
39. field : '',  
40. width : 50 ,  //json对象返回的属性要对应  
41. checkbox : true  //在前面有个选项框  
42. }, {    
43. title : '编号',  
44. field : 'id',   
45.  //json对象返回的属性要对应  
46. width : 100,  //必须给,否则列不显示  
47. sortable : true , //设置在哪里表示可以用此列排序   
48. align : 'center'   //让编号列居中显示  
49.   }] ],  
50. columns : [ [ {  
51.   
52. title : '用户名',  
53. field : 'name',  
54. width : 200,  
55. align : 'center' ,  
56. sortable : true ,  //设置在哪里表示可以用此列排序  
57. editor : {        //让用户名列变成可编辑且数据必填  
58. type : 'validatebox' ,   //让编辑框变成那种样  
59. options : {  
60. required : true  
61. }  
62. },  
63. //当类容较长时,鼠标移上去将全部显示出来,此函数必须要换回一个字符串,返回的字符串替换当前的值  
64. formatter : function(value,rowData,rowIndex){   
65.   
66. //height可以设置列高  
67. return '<div  style="height:50px" title="'+value+'">'+value+'</div>';  //利用html方式实现  
68. }  
69. } ,  {  
70. title : '密码',  
71. field : 'password',  
72. width : 200 ,  
73. editor : {          
74. type : 'validatebox' ,    
75. options : {  
76. required : true  
77. }  
78. } ,  
79. formatter : function(value,rowData,rowIndex){   
80. return '******';  //将密码用*显示  
81. } ,    
82. align : 'center'   
83. }, {  
84. title : '创建时间',  
85. field : 'createtime',  
86. width : 200,  
87. sortable : true ,    
88. editor : {          
89. type : 'datetimebox' ,   //自定义的类型  
90. options : {  
91. required : true  
92. }  
93. } ,  
94. align : 'center'     
95. } , {  
96. title : '操作',  
97. field : 'cz',  
98. width : 130,  
99. formatter : function(value,rowData,rowIndex){   
100. return '<button onclick="show('+rowIndex+');">编辑</button><button>删除</button>';  
101. },  
102. align : 'center'  
103.   
104. }] ], //用两个中括号可以合并单元格  
105. toolbar : [ { //添加一排按钮  
106. text : '增加',  
107. iconCls : 'icon-add',  
108. handler : function() {  
109. if(editRow != undefined ){  
110. $('#datagrid').datagrid('endEdit',editRow);   //避免同时开启多个编辑行  
111. }  
112. if(editRow == undefined){  
113. /*$('#datagrid').datagrid('appendRow',{   //在当前页末尾添加一行  
114. id : 'ww' ,  
115. name : '' ,  
116. password : '' ,  
117. createtime : ''  
118. });  
119. var rows = $('#datagrid').datagrid('getRows');  //得到当前页的所有行  
120. $('#datagrid').datagrid('beginEdit',rows.length - 1 );   //让添加的这一行开启编辑状态,索引从0开始    
121. */  
122. //调用自己添加的方法,让添加用户时密码可以编辑,创建时间不可编辑  
123. changeEditorAddRow();  
124.   
125. $('#datagrid').datagrid('insertRow',{  
126. index : 0 ,    //添加到第一行  
127. row : {  
128. name : '请输入用户名' ,  
129. password : '请输入密码' ,  
130. createtime : '请选择时间'  
131. }  
132. });  
133. $('#datagrid').datagrid('beginEdit' ,0);  //让添加的第一行开启编辑状态  
134. editRow = 0 ; //记录当前编辑行的索引  
135. }  
136. }  
137.   
138. }, '-', {  
139. text : '删除',  
140. iconCls : 'icon-remove',  
141. handler : function() {  
142. var rows = $('#datagrid').datagrid('getSelections');   //得到所选择的行  
143. if(rows.length > 0){  
144. $.messager.confirm('请确认','您确定要删除当前所选中的项目吗?',function(b){  
145. if(b){  
146. var ids = [] ;//传给后台的id集合  
147. for(var i = 0;i < rows.length; i++){  
148. ids.push(rows[i].id);  //拼接所选中的id  
149. }  
150. $.ajax({  
151. url : '${pageContext.request.contextPath}/student/delete' ,  
152. data : {  
153. ids : ids.join(',')   //将数组转换成一个以逗号分割的字符串传给后台  
154. },  
155. type : 'post',  
156. dataType : 'json' ,  
157. success : function(r){  
158. if(r && r.flag){  
159.   
160. $('#datagrid').datagrid('load'); //删除后刷新页面  
161. $('#datagrid').datagrid('unselectAll'); //避免系统还在选中状态,下次删除新的数据出错  
162. $.messager.show({  
163. title : '提示',  
164. msg : r.msg  
165. });  
166. }else{  
167. $.messager.alert('错误','删除失败' ,'error');  
168. }  
169. }  
170. });  
171. }  
172. });  
173. }else{  
174. $.messager.alert('提示','请选择要删除的记录','warning');//这里提示一个警告  
175. }  
176. }  
177.   
178. }, '-', {  
179. text : '修改', //'-',是一个分隔符  
180. iconCls : 'icon-edit',  
181. handler : function() {  
182. var rows = $('#datagrid').datagrid('getSelections');  //得到所选择的行  
183. if(rows.length == 1){  
184. changeEditorEditRow();  
185.   
186. if(editRow != undefined ){   //先判断双击前有没有在编辑的行  
187. $('#datagrid').datagrid('endEdit',editRow);   //避免同时开启多个编辑行  
188. }  
189. if(editRow == undefined){  
190. var index =  $('#datagrid').datagrid('getRowIndex' ,rows[0]);//得到选择行的索引    
191. $('#datagrid').datagrid('beginEdit' ,index);   
192. editRow = index ;   //记录当前开启编辑的行  
193. //在开启编辑状态时取消它的选择状态,这样就可以在修改时放弃修改当前行去修改其他行  
194. $('#datagrid').datagrid('unselectAll');    
195. }   
196. }  
197. }  
198.   
199. }, '-', {  
200. text : '保存', //'-',是一个分隔符  
201. iconCls : 'icon-save',  
202. handler : function() {  
203. $('#datagrid').datagrid('endEdit',editRow);  
204. }  
205.   
206. }, '-' , {  
207. text : '取消编辑', //'-',是一个分隔符  
208. iconCls : 'icon-redo',  
209. handler : function() {  
210. editRow = undefined ;  
211. $('#datagrid').datagrid('rejectChanges'); //调用回滚方法  
212. $('#datagrid').datagrid('unselectAll');  
213. }  
214.   
215. }, '-', {  
216. text : '清空dataGrid', //'-',是一个分隔符  
217. iconCls : 'icon-undo',  
218. handler : function() {  
219. $('#datagrid').datagrid('loadData',[]);  
220. }  
221.   
222. } ],  
223.   
224. onAfterEdit : function(rowIndex,rowData,changes){   //在提交编辑行后自动执行事件,自动封装数据  
225. //console.info(rowData);  //rowData刚结束编辑的哪一行数据,返回的是一个数组  
226. //console.info(changes);  //changes是改变的数据  
227. var inserted = $('#datagrid').datagrid('getChanges','inserted'); //得到插入的数据  
228. var updated = $('#datagrid').datagrid('getChanges','updated');  //得到修改的数据  
229. //即没有选择添加也没有选择修改就直接return结束,不往下面走了  不然url提交地址为空  
230. if(inserted.length < 1 && updated.length < 1){  
231. editRow = undefined ;  
232. datagrid.datagrid('unselectAll');  
233. return ;          
234. }  
235.   
236. var url = '';  
237. if(inserted.length > 0){  //表示点击的添加按钮  
238. url = '${pageContext.request.contextPath}/student/insert' ;  
239. }  
240. if(updated.length > 0){  //表示点击的添加按钮  
241. url = '${pageContext.request.contextPath}/student/update' ;  
242. }  
243. $.ajax({  
244. url : url ,  
245. data : rowData ,  
246. dataType : 'json' ,  
247. success : function(r){  
248. if(r && r.flag){  
249. $('#datagrid').datagrid('acceptChanges');  //后台添加成功后,前台保持同步,即不能"反悔"  
250. $('#datagrid').datagrid('load'); //添加后刷新页面  
251. $.messager.show({  
252. msg : r.msg ,  
253. title : '成功'  
254. });  
255. }else{  
256. $('#datagrid').datagrid('rejectChanges');  //添加失败自动取消编辑框,回滚到前一个状态  
257. $.messager.alert('错误', r.msg ,'error');  
258. }  
259. editRow = undefined ;  
260. $('#datagrid').datagrid('unselectAll'); //取消选中,避免出现黄色条  
261. }  
262. });  
263. //console.info(inserted);  
264. //console.info(updated);  
265.   
266. },  
267.   
268. //直接双击修改  
269. onDblClickRow : function(rowIndex,rowData){  //双击行触发事件  
270. changeEditorEditRow(); //调用方法  
271.   
272. if(editRow != undefined ){   //先判断双击前有没有在编辑的行  
273. $('#datagrid').datagrid('endEdit',editRow);   //避免同时开启多个编辑行  
274. }  
275. if(editRow == undefined){  
276. $('#datagrid').datagrid('beginEdit' ,rowIndex);    
277. editRow = rowIndex ; //记录当前编辑行的索引  
278. }  
279. },  
280.   
281. //datagrid的右键事件,右键显示一个菜单,三个参数是事件自带的  
282. onRowContextMenu : function(e, rowIndex, rowData){  
283. e.preventDefault();  //阻止浏览器右键默认的事件  
284. $(this).datagrid('unselectAll');   //先取消所有的选中,避免同一时间右键选中多行  
285. $(this).datagrid('selectRow',rowIndex);  //选中右键的这一行  
286. $('#menu').menu('show', {  
287.     left : e.pageX,   //让菜单位置跟着鼠标位置的改变而移动  
288.     top : e.pageY  
289. });  
290. }  
291. });  
292.   
293. //调用Myutil的方法将form表单元素的值序列化成对象,否则传过去的是字符串  
294. sel = function(){  
295. student_searchForm = $('#student_searchForm').form();  
296. console.info(serializeObject(student_searchForm));  
297. $('#datagrid').datagrid('load',serializeObject(student_searchForm));  
298. };  
299.   
300. //清空  
301. cle = function(){  
302. $('#datagrid').datagrid('load',{});  //此时后台接受到的过滤条件为空,将显示全部的数据  
303. student_searchForm = $('#student_searchForm').form().find('input').val('');  
304. };  
305.   
306. //添加行时改变editor,password可编辑,创建时间不可编辑  
307. changeEditorAddRow = function(){  
308. $('#datagrid').datagrid('addEditor',{      
309. field : 'password' ,  //名称需要对应  
310. editor : {         
311. type : 'validatebox' ,   //让编辑框变成那种类型  
312. options : {  
313. required : true  
314. }  
315. }  
316. });  
317. //让创建时间不可编辑,多个时用数组['createtime',''....]  
318. $('#datagrid').datagrid('removeEditor','createtime');  
319. };  
320.   
321. //修改行时改变editor,密码不可编辑,创建时间开启可编辑状态  
322. changeEditorEditRow = function(){  
323. $('#datagrid').datagrid('removeEditor','password');  
324. $('#datagrid').datagrid('addEditor',{      
325. field : 'createtime' ,    
326. editor : {         
327. type : 'datetimebox' ,   //自定义的类型  
328. options : {  
329. required : true  
330. }  
331. }  
332. });  
333. };  
334. //$('.datagrid-header div').css('textAlign','center');  //让表头居中  
335. });  
336.   
337. //点击控制列的编辑按钮执行的方法  
338. function show(i){  
339. console.info(i);  
340. var rows =  $('#datagrid').datagrid('getRows'); //得到当前页的所有行的数据,是一个数组  
341. console.info(rows[i]);  //得到第i+1行的那么属性值  
342. }  
343.   
344.   
345.   
346. </script>  
347. <div class="easyui-tabs" fit="true" border="false">  
348. <div title="学生管理" border="false">  
349. <div class="easyui-layout" fit="true" border="false">  
350.   
351. <div region="north" title="过滤查询" border="false" style="height:100px;overflow:hidden;">  
352. <form id="student_searchForm">  
353. <table class="tableForm datagrid-toolbar" style="width:100%;height:100%">  
354. <tr style="width:100px;">  
355. <th >用户名</th>  
356. <td><input id="name" name="name" style="width:150px;"/></td>  
357. </tr>  
358. <tr>  
359. <th>创建时间</th> <!-- editable="false"表示不能手动输入信息 -->  
360. <td>  
361. <input name="createtimeStart" class="easyui-datetimebox" editable="false" style="width:100px;"/>至  
362. <input name="createtimeEnd" class="easyui-datetimebox" editable="false" style="width:100px;"/>  
363. <a href="javascript:void(0);" class="easyui-linkbutton" onclick="sel();">查询</a>  
364. <a href="javascript:void(0);" class="easyui-linkbutton" onclick="cle();">清空</a>  
365. </td>  
366. </tr>  
367. </table>  
368. </form>  
369. </div>  
370.   
371. <div region="center" border="false">  
372. <table id="datagrid" ></table>  
373. </div>  
374.   
375. <!-- 右键弹出一个菜单需要先建立一个菜单 -->  
376. <div id="menu" class="easyui-menu" style="width:120px; display:none;">  
377. <div onclick="" iconCls="icon-add">增加</div>  
378. <div onclick="" iconCls="icon-remove">删除</div>  
379. <div onclick="" iconCls="icon-edit">编辑</div>  
380. </div>  
381.   
382. </div>  
383. </div>  
384. </div>  

新增就能编辑：

[html]  view plain  copy

 print ?

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
2. <html>  
3. <head>  
4. <title>工艺流程</title>  
5. <meta http-equiv="pragma" content="no-cache">  
6. <meta http-equiv="cache-control" content="no-cache">  
7. <meta http-equiv="expires" content="0">  
8. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
9. <meta http-equiv="description" content="This is my page">  
10. <%@ include file="/WEB-INF/def/web/include/head.jsp"%>  
11. </head>  
12. <body class="easyui-layout" id="divform" style="display:none">  
13.     <!-- 信息列表 -->  
14.     <table id="dg" class="easyui-datagrid" style="width:100%" toolbar="#tb"  
15.         rownumbers="true" singleSelect="true" idField="invtypeid"  
16.         url="/cm/pub/tech/l">  
17.         <thead>  
18.             <tr>  
19.                 <th data-options="field:'techname',width:200"  
20.                     editor="{type:'textbox'}">工艺流程名称</th>  
21.                 <th data-options="field:'memo',width:200" editor="{type:'textbox'}">备注</th>  
22.                 <th data-options="field:'operupd',width:100" align="center"  
23.                     formatter="formatAction">操作</th>  
24.             </tr>  
25.         </thead>  
26.     </table>  
27.     <div id="tb">  
28.         <a href="javascript:void(0)" target="_blank" class="easyui-linkbutton"  
29.             iconCls="icon-add" plain="true" onclick="appendrow();">新增</a>  
30.     </div>  
31.     <!-- 删除对话框 -->  
32.     <%@ include file="/WEB-INF/def/web/include/delmsg.jsp"%>  
33. </body>  
34. </html>  
35. <script language="javascript">  
36.     $('#divform').css("display", "");  
37.     $("#dg").css("height", $(window).height());  
38.     var delbillid;  
39.     var delindex;  
40.     //初始表格  
41.     $('#dg').datagrid({  
42.         onBeforeEdit : function(index, row) {  
43.             row.editing = true;  
44.             updateActions(index);  
45.         },  
46.         onAfterEdit : function(index, row) {  
47.             row.editing = false;  
48.             updateActions(index);  
49.         },  
50.         onCancelEdit : function(index, row) {  
51.             row.editing = false;  
52.             updateActions(index);  
53.         }  
54.     });  
55.     function updateActions(index) {  
56.         $('#dg').datagrid('updateRow', {  
57.             index : index,  
58.             row : {}  
59.         });  
60.     }  
61.     //添加修改和删除  
62.     function formatAction(value, row, index) {  
63.         if (row.editing) {  
64.             var e = "<a href='javascript:void(0)' οnclick='saverow(" + index  
65.                     + ")'>确认</a>  ";  
66.             var d = "<a href='javascript:void(0)' οnclick='cancelrow(" + index  
67.                     + ")'>取消</a>";  
68.             return e + d;  
69.         } else {  
70.             debugger;  
71.             var e = "<a href='javascript:void(0)' οnclick='editrow(" + index  
72.                     + ")'>编辑</a>  ";  
73.             var d = "<a href='javascript:void(0)' οnclick='deleterow(\""  
74.                     + row.invtypeid + "\")'>删除</a>";  
75.             return e + d;  
76.         }  
77.     }  
78.     //新增行即可编辑  
79.     function appendrow() {  
80.         $('#dg').datagrid('appendRow', {  
81.             techid : ''  
82.         });  
83.         var rows = $('#dg').datagrid('getRows');  
84.         $('#dg').datagrid('beginEdit',rows.length - 1 );   
85.     }  
86.     //开始编辑  
87.     function editrow(index) {  
88.         $('#dg').datagrid('beginEdit', index);  
89.     }  
90.     //编辑取消  
91.     function cancelrow(index) {  
92.         $('#dg').datagrid('cancelEdit', index);  
93.     }  
94.     //数据保存  
95.     function saverow(index) {  
96.         $('#dg').datagrid('endEdit', index);  
97.         var row = $('#dg').datagrid('getData').rows[index];  
98.         var techname = row.techname;  
99.         //var memo = row.memo;  
100.         if (techname == "") {  
101.             $.messager.alert('提示信息', "请你填写工艺流程名称");  
102.             return;  
103.         }  
104.         var rows1 = $('#dg').datagrid('getRows');  
105.         var length = rows1.length;  
106.         for (var i = 0; i < length - 1; i++) {  
107.             var row2 = rows1[i];  
108.             var _techname = undefined2empty(row2.techname);  
109.             if (techname == _techname && index != i) {  
110.                 $.messager.alert('提示信息', "工艺流程名称不可以重复 请重新输入");  
111.                 editrow(index);  
112.                 return;  
113.             }  
114.         }  
115.         //var para = "invtypeid="+undefined2empty(invtypeid)+"&invtypename="+invtypename;  
116.         $.getJSON("/cm/pub/tech/s", function(data) {  
117.             if (data.errcode == "") {  
118.                 $.messager.alert('提示信息', "保存成功!");  
119.                 row.invtypeid = data.list[0];  
120.                 if (data.list[1] != null) {  
121.                     row.invtypecode = data.list[1];  
122.                 }  
123.                 $('#dg').datagrid('reload', index);  
124.             } else {  
125.                 $.messager.alert('提示信息', data.errmsg);  
126.             }  
127.         });  
128.     }  
129.     //数据删除  
130.     function deleterow(billid) {  
131.         var index = $('#dg').datagrid("getRowIndex", billid);  
132.         if (billid == undefined) {  
133.             $('#dg').datagrid('cancelEdit', index);  
134.             $('#dg').datagrid('deleteRow', index);  
135.             return;  
136.         }  
137.         delbillid = billid;  
138.         delindex = index;  
139.         $('#dlg').dialog('open');  
140.         $('#dlg').html("确定要删除此记录吗？");  
141.     }  
142.     //删除选择  
143.     function delexcute() {  
144.         $('#dlg').dialog('close');  
145.         $.getJSON("/cm/pub/tech/d?techid=" + delbillid, function(data) {  
146.             if (data.errcode == "") {  
147.                 $.messager.alert('提示信息', "删除成功!");  
148.                 $('#dg').datagrid('deleteRow', delindex);  
149.             } else {  
150.                 $.messager.alert('提示信息', data.errmsg);  
151.             }  
152.         });  
153.     }  
154. </script>  

另一种方式待验证：

appendRow后获取添加行的index，调用beginEdit

[html]  view plain  copy

 print ?

1. var index=$('#FlowList').datagrid('appendRow', {           
2.                 FlowTypeName: 'new name',  
3.                 FlowTypeCode: 30                  
4.             }).datagrid('getRows').length-1;  
5. $('#FlowList').datagrid('beginEdit',index)