01./**
02. * etreegrid - jQuery EasyUI
03. *
04. * Licensed under the GPL:
05. * http://www.gnu.org/licenses/gpl.txt
06. *
07. * Copyright 2013 maddemon [ zhengliangjun@gmail.com ]
08. *
09. * Dependencies:
10. * treegrid
11. * messager
12. *
13. */
14.(function ($) {
15.
16. function buildGrid(target) {
17. var opts = $.data(target, 'etreegrid').options;
18. $(target).treegrid($.extend({}, opts, {
19. onDblClickCell: function (field, row) {
20. if (opts.editing) {
21. $(this).etreegrid("editRow", row);
22. focusEditor(field);
23. }
24. },
25. onClickCell: function (field, row) {
26. if (opts.editing && opts.editIndex >= 0) {
27. if (!trySaveRow()) {
28. focusEditor(field);
29. return;
30. }
31. }
32. },
33. onAfterEdit: function (row, changes) {
34. opts.editIndex = undefined;
35. var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
36. if (url) {
37. $.post(url, row).done(function (json, statusText, xhr) {
38. if (row.isNewRecord) {
39. row.isNewRecord = false;
40. //remove new
41. $(target).treegrid("remove", row[opts.idField]);
42. row[opts.idField] = json[opts.idField] || json.data[opts.idField];
43. $(target).treegrid("append", { parent: row[opts.parentIdField], data: [row] });
44. //append new
45. } else {
46. //refresh
47. $(target).treegrid("refresh", row[opts.idField]);
48. }
49. }).error(function (xhr) {
50. var result = eval("(" + xhr.responseText + ")");
51. $.messager.alert("失败", result.message || result, "warning");
52. });
53. opts.onSave.call(target, row);
54. } else {
55. opts.onSave.call(target, row);
56. }
57. if (opts.onAfterEdit) opts.onAfterEdit.call(target, row);
58. },
59. onCancelEdit: function (row) {
60. opts.editIndex = undefined;
61. if (row.isNewRecord) {
62. $(this).treegrid("remove", row[opts.idField]);
63. }
64. if (opts.onCancelEdit) opts.onCancelEdit.call(target, row);
65. },
66. onBeforeLoad: function (row, param) {
67. if (opts.onBeforeLoad.call(target, row, param) == false) {
68. return false;
69. };
70. $(this).treegrid("rejectChanges");
71. }
72. }));
73.
74. function trySaveRow() {
75. if (!$(target).treegrid("validateRow", opts.editIndex)) {
76. $(target).treegrid("select", opts.editIndex);
77. return false;
78. }
79. if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
80. setTimeout(function () {
81. $(target).treegrid('select', opts.editIndex);
82. }, 0);
83. return false;
84. }
85. $(target).treegrid('endEdit', opts.editIndex);
86. return true;
87. }
88.
89. function focusEditor(field) {
90. var editor = $(target).treegrid('getEditor', { index: opts.editIndex, field: field });
91. if (editor) {
92. editor.target.focus();
93. } else {
94. var editors = $(target).treegrid('getEditors', opts.editIndex);
95. if (editors.length) {
96. editors[0].target.focus();
97. }
98. }
99. }
100. }
101.
102. $.fn.etreegrid = function (options, param) {
103. if (typeof (options) == "string") {
104. var method = $.fn.etreegrid.methods[options];
105. if (method) {
106. return method(this, param);
107. } else {
108. return this.treegrid(options, param);
109. }
110. }
111.
112. options = options || {};
113. return this.each(function () {
114. var state = $.data(this, "etreegrid");
115. if (state) {
116. $.extend(state.options, options);
117. } else {
118. $.data(this, "etreegrid", { options: $.extend({}, $.fn.etreegrid.defaults, $.fn.etreegrid.parseOptions(this), options) });
119. }
120. ;
121. buildGrid(this);
122.
123. });
124. };
125.
126. $.fn.etreegrid.parseOptions = function (target) {
127. return $.extend({}, $.fn.treegrid.parseOptions(target), {});
128. };
129.
130. $.fn.etreegrid.methods = {
131. options: function (jq) {
132. var opts = $.data(jq[0], "etreegrid").options;
133. return opts;
134. },
135. enableEditing: function (jq) {
136. return jq.each(function () {
137. var opts = $.data(this, "etreegrid").options;
138. opts.editing = true;
139. });
140. },
141. disableEditing: function (jq) {
142. return jq.each(function () {
143. var opts = $.data(this, "etreegrid").options;
144. opts.editing = false;
145. });
146. },
147. editRow: function (jq, row) {
148. return jq.each(function () {
149. var dg = $(this);
150. var opts = $.data(this, "etreegrid").options;
151. var index = row[opts.idField];
152. var editIndex = opts.editIndex;
153. if (editIndex != index) {
154. if (dg.treegrid("validateRow", editIndex)) {
155. if (editIndex >= 0) {
156. if (opts.onBeforeSave.call(this, editIndex) == false) {
157. setTimeout(function () {
158. dg.treegrid("select", editIndex);
159. }, 0);
160. return;
161. }
162. }
163. dg.treegrid("endEdit", editIndex);
164. dg.treegrid("beginEdit", index);
165. opts.editIndex = index;
166. var node = dg.treegrid("find", index);
167. opts.onEdit.call(this, node);
168. } else {
169. setTimeout(function () {
170. dg.treegrid("select", editIndex);
171. }, 0);
172. }
173. }
174. });
175. },
176. addRow: function (jq) {
177. return jq.each(function () {
178. var dg = $(this);
179. var opts = $.data(this, "etreegrid").options;
180. var editIndex = opts.editIndex;
181. if (opts.editIndex >= 0) {
182. if (!dg.treegrid("validateRow", editIndex)) {
183. dg.treegrid("select", editIndex);
184. return;
185. }
186. if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
187. setTimeout(function () {
188. dg.treegrid('select', opts.editIndex);
189. }, 0);
190. return;
191. }
192. dg.treegrid('endEdit', opts.editIndex);
193. }
194. var selected = dg.treegrid("getSelected");
195. var parentId = selected ? selected[opts.idField] : 0;
196. var newRecord = { isNewRecord: true };
197. newRecord[opts.idField] = 0;
198. newRecord[opts.parentIdField] = parentId;
199. dg.treegrid("append", { parent: parentId, data: [newRecord] });
200. opts.editIndex = 0;
201. dg.treegrid("beginEdit", opts.editIndex);
202. dg.treegrid("select", opts.editIndex);
203. });
204. },
205. saveRow: function (jq) {
206. return jq.each(function () {
207. var dg = $(this);
208. var opts = $.data(this, 'etreegrid').options;
209. if (opts.editIndex >= 0) {
210. if (!dg.treegrid("validateRow", opts.editIndex)) {
211. dg.treegrid("select", opts.editIndex);
212. return;
213. }
214. if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
215. setTimeout(function () {
216. dg.treegrid('select', opts.editIndex);
217. }, 0);
218. return;
219. }
220. $(this).treegrid('endEdit', opts.editIndex);
221. }
222. });
223. },
224. cancelRow: function (jq) {
225. return jq.each(function () {
226. var index = $(this).etreegrid('options').editIndex;
227. $(this).treegrid('cancelEdit', index);
228. });
229. },
230. removeRow: function (jq) {
231. return jq.each(function () {
232. var dg = $(this);
233. var opts = $.data(this, 'etreegrid').options;
234. var row = dg.treegrid('getSelected');
235. if (!row) return;
236. if (row.isNewRecord) {
237. dg.treegrid("remove", row[opts.idField]);
238. return;
239. }
240. $.messager.confirm("确认", "确认删除这条数据吗？", function (r) {
241. if (!r) return;
242. var idValue = row[opts.idField];
243. if (opts.deleteUrl) {
244. $.post(opts.deleteUrl, { id: idValue }).done(function (json) {
245. dg.treegrid("remove", idValue);
246. opts.onRemove.call(dg[0], json, row);
247. }).error(function (xhr) {
248. var json = eval('(' + xhr.responseText + ')');
249. $.messager.alert('错误', json.message || json, "warning");
250. });
251. } else {
252. dg.datagrid('cancelEdit', idValue);
253. dg.datagrid('deleteRow', idValue);
254. opts.onRemove.call(dg[0], row);
255. }
256. });
257. });
258. }
259. };
260.
261. $.fn.etreegrid.defaults = $.extend({}, $.fn.treegrid.defaults, {
262. editing: true,
263. editIndex: -1,
264. messager: {},
265.
266. url: null,
267. saveUrl: null,
268. updateUrl: null,
269. deleteUrl: null,
270.
271. onAdd: function (row) { },
272. onEdit: function (row) { },
273. onBeforeSave: function (index) { },
274. onSave: function (row) { },
275. onRemove: function (row) { },
276. });
277.})(jQuery);
/**
* etreegrid - jQuery EasyUI
*
* Licensed under the GPL:
* http://www.gnu.org/licenses/gpl.txt
*
* Copyright 2013 maddemon [ zhengliangjun@gmail.com ]
*
* Dependencies:
* treegrid
* messager
*
*/
(function ($) {
function buildGrid(target) {
var opts = $.data(target, 'etreegrid').options;
$(target).treegrid($.extend({}, opts, {
onDblClickCell: function (field, row) {
if (opts.editing) {
$(this).etreegrid("editRow", row);
focusEditor(field);
}
},
onClickCell: function (field, row) {
if (opts.editing && opts.editIndex >= 0) {
if (!trySaveRow()) {
focusEditor(field);
return;
}
}
},
onAfterEdit: function (row, changes) {
opts.editIndex = undefined;
var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
if (url) {
$.post(url, row).done(function (json, statusText, xhr) {
if (row.isNewRecord) {
row.isNewRecord = false;
//remove new
$(target).treegrid("remove", row[opts.idField]);
row[opts.idField] = json[opts.idField] || json.data[opts.idField];
$(target).treegrid("append", { parent: row[opts.parentIdField], data: [row] });
//append new
} else {
//refresh
$(target).treegrid("refresh", row[opts.idField]);
}
}).error(function (xhr) {
var result = eval("(" + xhr.responseText + ")");
$.messager.alert("失败", result.message || result, "warning");
});
opts.onSave.call(target, row);
} else {
opts.onSave.call(target, row);
}
if (opts.onAfterEdit) opts.onAfterEdit.call(target, row);
},
onCancelEdit: function (row) {
opts.editIndex = undefined;
if (row.isNewRecord) {
$(this).treegrid("remove", row[opts.idField]);
}
if (opts.onCancelEdit) opts.onCancelEdit.call(target, row);
},
onBeforeLoad: function (row, param) {
if (opts.onBeforeLoad.call(target, row, param) == false) {
return false;
};
$(this).treegrid("rejectChanges");
}
}));
function trySaveRow() {
if (!$(target).treegrid("validateRow", opts.editIndex)) {
$(target).treegrid("select", opts.editIndex);
return false;
}
if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
setTimeout(function () {
$(target).treegrid('select', opts.editIndex);
}, 0);
return false;
}
$(target).treegrid('endEdit', opts.editIndex);
return true;
}
function focusEditor(field) {
var editor = $(target).treegrid('getEditor', { index: opts.editIndex, field: field });
if (editor) {
editor.target.focus();
} else {
var editors = $(target).treegrid('getEditors', opts.editIndex);
if (editors.length) {
editors[0].target.focus();
}
}
}
}
$.fn.etreegrid = function (options, param) {
if (typeof (options) == "string") {
var method = $.fn.etreegrid.methods[options];
if (method) {
return method(this, param);
} else {
return this.treegrid(options, param);
}
}
options = options || {};
return this.each(function () {
var state = $.data(this, "etreegrid");
if (state) {
$.extend(state.options, options);
} else {
$.data(this, "etreegrid", { options: $.extend({}, $.fn.etreegrid.defaults, $.fn.etreegrid.parseOptions(this), options) });
}
;
buildGrid(this);
});
};
$.fn.etreegrid.parseOptions = function (target) {
return $.extend({}, $.fn.treegrid.parseOptions(target), {});
};
$.fn.etreegrid.methods = {
options: function (jq) {
var opts = $.data(jq[0], "etreegrid").options;
return opts;
},
enableEditing: function (jq) {
return jq.each(function () {
var opts = $.data(this, "etreegrid").options;
opts.editing = true;
});
},
disableEditing: function (jq) {
return jq.each(function () {
var opts = $.data(this, "etreegrid").options;
opts.editing = false;
});
},
editRow: function (jq, row) {
return jq.each(function () {
var dg = $(this);
var opts = $.data(this, "etreegrid").options;
var index = row[opts.idField];
var editIndex = opts.editIndex;
if (editIndex != index) {
if (dg.treegrid("validateRow", editIndex)) {
if (editIndex >= 0) {
if (opts.onBeforeSave.call(this, editIndex) == false) {
setTimeout(function () {
dg.treegrid("select", editIndex);
}, 0);
return;
}
}
dg.treegrid("endEdit", editIndex);
dg.treegrid("beginEdit", index);
opts.editIndex = index;
var node = dg.treegrid("find", index);
opts.onEdit.call(this, node);
} else {
setTimeout(function () {
dg.treegrid("select", editIndex);
}, 0);
}
}
});
},
addRow: function (jq) {
return jq.each(function () {
var dg = $(this);
var opts = $.data(this, "etreegrid").options;
var editIndex = opts.editIndex;
if (opts.editIndex >= 0) {
if (!dg.treegrid("validateRow", editIndex)) {
dg.treegrid("select", editIndex);
return;
}
if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
setTimeout(function () {
dg.treegrid('select', opts.editIndex);
}, 0);
return;
}
dg.treegrid('endEdit', opts.editIndex);
}
var selected = dg.treegrid("getSelected");
var parentId = selected ? selected[opts.idField] : 0;
var newRecord = { isNewRecord: true };
newRecord[opts.idField] = 0;
newRecord[opts.parentIdField] = parentId;
dg.treegrid("append", { parent: parentId, data: [newRecord] });
opts.editIndex = 0;
dg.treegrid("beginEdit", opts.editIndex);
dg.treegrid("select", opts.editIndex);
});
},
saveRow: function (jq) {
return jq.each(function () {
var dg = $(this);
var opts = $.data(this, 'etreegrid').options;
if (opts.editIndex >= 0) {
if (!dg.treegrid("validateRow", opts.editIndex)) {
dg.treegrid("select", opts.editIndex);
return;
}
if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
setTimeout(function () {
dg.treegrid('select', opts.editIndex);
}, 0);
return;
}
$(this).treegrid('endEdit', opts.editIndex);
}
});
},
cancelRow: function (jq) {
return jq.each(function () {
var index = $(this).etreegrid('options').editIndex;
$(this).treegrid('cancelEdit', index);
});
},
removeRow: function (jq) {
return jq.each(function () {
var dg = $(this);
var opts = $.data(this, 'etreegrid').options;
var row = dg.treegrid('getSelected');
if (!row) return;
if (row.isNewRecord) {
dg.treegrid("remove", row[opts.idField]);
return;
}
$.messager.confirm("确认", "确认删除这条数据吗？", function (r) {
if (!r) return;
var idValue = row[opts.idField];
if (opts.deleteUrl) {
$.post(opts.deleteUrl, { id: idValue }).done(function (json) {
dg.treegrid("remove", idValue);
opts.onRemove.call(dg[0], json, row);
}).error(function (xhr) {
var json = eval('(' + xhr.responseText + ')');
$.messager.alert('错误', json.message || json, "warning");
});
} else {
dg.datagrid('cancelEdit', idValue);
dg.datagrid('deleteRow', idValue);
opts.onRemove.call(dg[0], row);
}
});
});
}
};
$.fn.etreegrid.defaults = $.extend({}, $.fn.treegrid.defaults, {
editing: true,
editIndex: -1,
messager: {},
url: null,
saveUrl: null,
updateUrl: null,
deleteUrl: null,
onAdd: function (row) { },
onEdit: function (row) { },
onBeforeSave: function (index) { },
onSave: function (row) { },
onRemove: function (row) { },
});
})(jQuery);
这个也是转载一位博主，仿照easyui官方扩展的edatagrid写的，但是请注意，在1.3.1版本上这个组件有些问题，请使用的朋友们注意下。
3255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
