EasyUI Grid和Tree脚本

  1 /*
  2 * 文 件 名：EasyUICommon.js
  3 * 功能描述：EasyUIJs函数
  4 *
  5 * 版    权：Copyright 2014-2020, ZhiKang Wu
  6 * 版    本：V1.0.0
  7 * 日    期：2014-10-23
  8 * 
  9 */
 10 /*
 11 * 参数说明（固定参数）：
 12 * Grid按钮ID：（增加）btn_add，（修改）btn_edit，（删除）btn_del；
 13 * Dialog窗体内ID：（窗体）OpenEditId，（保存按钮）btn_save，（取消按钮）btn_cancel；
 14 * Grid ID前台赋值：InitGrid($("#"))，InitGrid($("."))，InitGrid($(""))；如果为空值则自动赋值Grid ID为$("#grid")；
 15 * 
 16 */
 17 
 18 /// <reference path="jquery/1.8.3/jquery-1.8.3.min.js" />
 19 /// <reference path="easyui/1.3.6/jquery.easyui.js" />
 20 //**********************************************EasyUI Grid形式ONE**********************************************//
 21 //加载表格datagrid
 22 function InitGrid(gridId) {
 23     if (gridId == undefined) {
 24         gridId = $("#grid");
 25     }
 26 
 27     gridId.datagrid({
 28         fit: true,
 29         rownumbers: true,
 30         singleSelect: true,
 31         pagination: true,
 32         pageSize: 10,
 33         loadMsg: ‘数据加载中请稍后……‘,
 34         //在用户选择一行的时候触发，参数包括：
 35         //rowIndex：选择的行的索引值，索引从0开始。
 36         //rowData：对应于所选行的记录。
 37         onSelect: function (rowIndex, rowData) {
 38             var count = gridId.datagrid("getSelections").length;
 39             if (count == 1) {
 40                 $("#btn_edit").linkbutton("enable");
 41                 $("#btn_del").linkbutton("enable");
 42             }
 43 
 44         },
 45         //在数据加载成功的时候触发。
 46         onLoadSuccess: function (data) {
 47             $("#btn_edit").linkbutton("disable"); //按钮可用与否
 48             $("#btn_del").linkbutton("disable");
 49         }
 50     });
 51 
 52     $("#toolbarId a").each(function (index) {
 53         var typeId = $(this).attr("id");
 54         var typeUrl = $(this).attr("data-url");
 55         var typeTitle = $(this).attr("title");
 56 
 57         if (typeUrl == undefined) {
 58             $.messager.show({
 59                 title: "增删改URL",
 60                 msg: "<div class=‘messager-icon messager-error‘></div><div>增删改URL为空,请联系技术部修改！</div><div style=‘clear: both;‘></div>"
 61             });
 62             return false;
 63         }
 64 
 65         $("#" + typeId).linkbutton({
 66             plain: true,
 67             onClick: function () {
 68 
 69                 //row选择中的某一行数据
 70                 var row = "";
 71                 if (typeId == "btn_add") {
 72 
 73                     OpenEditDialog(gridId, typeTitle, row, typeUrl);
 74 
 75                 } else if (typeId == "btn_del") {
 76 
 77                     row = gridId.datagrid("getSelected");
 78                     if (row) {
 79                         $.messager.confirm(‘确认删除‘, ‘您确认要删除数据吗？‘, function (d) {
 80                             if (d) {
 81                                 $.post(typeUrl, { Guid: row.Guid }, function (json) {
 82                                     if (json.isSucc) {
 83                                         gridId.datagrid("reload");
 84                                         $.messager.show({
 85                                             title: "成功提示",
 86                                             msg: "<div class=‘messager-icon messager-info‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
 87                                         });
 88                                     } else {
 89                                         $.messager.show({
 90                                             title: "失败提示",
 91                                             msg: "<div class=‘messager-icon messager-error‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
 92                                         });
 93                                     }
 94                                 }, ‘json‘);
 95                             }
 96                         });
 97                     }
 98 
 99                 } else {
100 
101                     row = gridId.datagrid("getSelected");
102 
103                     OpenEditDialog(gridId, typeTitle, row, typeUrl);
104 
105                 }
106 
107             }
108         })
109 
110     })
111 
112 
113     $(‘#btn_search‘).searchbox({
114         width: 250,
115         searcher: function (value, name) {
116             //查询参数直接添加在queryParams中    
117             var queryParams = gridId.datagrid(‘options‘).queryParams;
118             queryParams.value = value;
119             gridId.datagrid(‘options‘).queryParams = queryParams;
120             gridId.datagrid(‘reload‘);
121         },
122         prompt: ‘请输入查询的关键字‘
123     });
124 }
125 //**********************************************EasyUI Grid形式ONE**********************************************//
126 
127 //**********************************************EasyUI Grid公用函数**********************************************//
128 //弹框
129 function OpenEditDialog(gridId, typeTitle, rowData, typeUrl) {
130     var title = typeTitle;
131     var href = typeUrl;
132     var dlgEdit = $("<div/>").dialog({
133         id: "OpenEditId",
134         title: title,
135         href: href,
136         modal: true,
137         width: 550,
138         height: 250,
139         buttons: [{
140             id: "btn_save",
141             text: "保存",
142             iconCls: "icon-ok",
143             handler: function () {
144 
145                 //提交对话框表单
146                 $("#OpenEditId form").submit();
147 
148             }
149         }, {
150             id: "btn_cancel",
151             text: "取消",
152             iconCls: "icon-cancel",
153             handler: function () {
154 
155                 //关闭对话框表单
156                 $(dlgEdit).dialog("close");
157 
158             }
159         }],
160         onLoad: function () {
161 
162             //初始化表单
163             InitForm(href, rowData, gridId);
164 
165         },
166         onClose: function () {
167             $(this).dialog("destroy");
168         }
169     });
170 }
171 //初始化表单
172 function InitForm(url, rowData, gridId) {
173     var fmEdit = $("#OpenEditId form").EasyuiAjaxForm({
174         url: url,
175         onSubmit: function () {
176             // 验证表单数据有效性
177             if ($(this).form("validate")) {
178                 $("#btn_save").linkbutton("disable");
179                 $("#btn_cancel").linkbutton("disable");
180                 return true;
181             } else {
182                 return false;
183             }
184         },
185         success: function (data) {
186 
187             $("#btn_save").linkbutton("enable");
188             $("#btn_cancel").linkbutton("enable");
189 
190             var json = jQuery.parseJSON(data);
191             if (json.isSucc) {
192                 //表单提交成功
193                 gridId.datagrid("reload");
194                 gridId.treegrid("reload");
195 
196                 $("#OpenEditId").dialog("close");
197 
198                 $.messager.show({
199                     title: "成功提示",
200                     msg: "<div class=‘messager-icon messager-info‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
201                 });
202             } else {
203                 //表单提交失败
204                 if (json.resultMsg != null) {
205                     $.messager.show({
206                         title: "失败提示",
207                         msg: "<div class=‘messager-icon messager-error‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
208                     });
209                 } else {
210                     $.each(json.errors, function (i, n) {
211                         $("#" + n.id, dlgEdit).validatebox({ validType: "fail[‘" + n.val + "‘]", invalidMessage: n.msg }).validatebox("validate").focus();
212                     });
213                 }
214             }
215         }
216     });
217     // 加载表单数据
218     if (rowData != undefined) {
219         $(fmEdit).form("load", rowData);
220     }
221 }
222 
223 $.fn.EasyuiAjaxForm = function (options, param) {
224     return $(this).append(‘<input type="hidden" value ="ajax" Name="EasyFormSubmitType"/>‘).form(options, param);
225 };
226 //**********************************************EasyUI Grid公用函数**********************************************//
227 
228 //**********************************************EasyUI Tree形式ONE**********************************************//
229 // 初始化树形列表
230 function InitTree(treeId) {
231     if (treeId == undefined) {
232         treeId = $("#tree");
233     }
234 
235     treeId.treegrid({
236         fit: true,
237         singleSelect: true,
238         rownumbers: true,
239         animate: true,
240         onSelect: function (row) {
241             var count = treeId.treegrid("getSelections").length;
242             if (count == 1) {
243                 $("#btn_edit").linkbutton("enable");
244                 $("#btn_del").linkbutton("enable");
245                 $("#btn_AddPageTable").linkbutton("enable");
246 
247                 //$("#admin_menus_fields_treegrid").treegrid("load", { menuId: row.Id });如果还有其他树，可以再这里传入ID关联
248 
249             }
250         },
251         onLoadSuccess: function (data) {
252             $("#btn_edit").linkbutton("disable");
253             $("#btn_del").linkbutton("disable");
254             $("#btn_AddPageTable").linkbutton("disable");
255         }
256     });
257 
258     // 为表格工具栏添加单击事件
259     $("#btn_ExpandOrNot").linkbutton({
260         plain: true,
261         onClick: function () {
262 
263             var options = $(this).linkbutton("options");
264             if (options.iconCls == "folder-close") {
265                 $(this).linkbutton({ iconCls: "folder-open", text: "展开" });
266                 treeId.treegrid("collapseAll");
267             }
268             else {
269                 $(this).linkbutton({ iconCls: "folder-close", text: "折叠" });
270                 treeId.treegrid("expandAll");
271             }
272 
273         }
274     });
275     $("#btn_add").linkbutton({
276         plain: true,
277         onClick: function () {
278             var selected = treeId.treegrid("getSelected");
279             if (selected) {
280 
281                 OpenEditDialog(treeId, "add", { ParentGuid: selected.Guid }, "/Home/Add");
282 
283             } else {
284 
285                 OpenEditDialog(treeId, "add", "", "/Home/Add");
286 
287             }
288         }
289     });
290     $("#btn_edit").linkbutton({
291         plain: true,
292         onClick: function () {
293             var row = treeId.treegrid("getSelected");
294             if (row) {
295 
296                 OpenEditDialog(treeId, "edit", row, "/Home/Modify");
297 
298             }
299         }
300     });
301     $("#btn_del").linkbutton({
302         plain: true,
303         onClick: function () {
304             var row = treeId.treegrid("getSelected");
305             if (row) {
306                 $.messager.confirm("确认删除", "您确认要删除数据吗？", function (d) {
307                     if (d) {
308 
309                         $.post("/Home/Delete", { Guid: row.Guid }, function (json) {
310                             if (json.isSucc) {
311                                 treeId.treegrid("reload");
312                                 $.messager.show({
313                                     title: "成功提示",
314                                     msg: "<div class=‘messager-icon messager-info‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
315                                 });
316                             } else {
317                                 $.messager.show({
318                                     title: "失败提示",
319                                     msg: "<div class=‘messager-icon messager-error‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
320                                 });
321                             }
322                         }, "json");
323 
324                     }
325                 });
326             }
327         }
328     });
329 
330     //添加页面表单
331     $("#btn_AddPageTable").linkbutton({
332         plain: true,
333         onClick: function () {
334             var row = treeId.treegrid("getSelected");
335             if (row) {
336 //                OpenAddPageTableDialog(row);
337             }
338         }
339     });
340 }
341 //**********************************************EasyUI Tree形式ONE**********************************************//

 1 //扩展easyui表单的验证
 2 $.extend($.fn.validatebox.defaults.rules, {
 3     //验证汉字
 4     CHS: {
 5         validator: function (value) {
 6             return /^[\u0391-\uFFE5]+$/.test(value);
 7         },
 8         message: ‘请输入有效的汉字‘
 9     },
10     //手机号码验证
11     Tel: {//value值为文本框中的值
12         validator: function (value) {
13             var reg = /^(?:13\d|15\d)\d{5}(\d{3}|\*{3})$/;
14             return reg.test(value);
15         },
16         message: ‘请输入有效的手机号码‘
17     },
18     //座机号码验证
19     Phone: {//value值为文本框中的值
20         validator: function (value) {
21             var reg = /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
22             return reg.test(value);
23         },
24         message: ‘请输入有效的座机号码‘
25     },
26     //国内邮编验证
27     ZipCode: {
28         validator: function (value) {
29             var reg = /^[0-9]\d{5}$/;
30             return reg.test(value);
31         },
32         message: ‘请输入有效的邮编‘
33     },
34     //数字
35     Number: {
36         validator: function (value) {
37             var reg = /^\+?(:?(:?\d+\.\d+)|(:?\d+))$/;
38             return reg.test(value);
39         },
40         message: ‘请输入有效的数字‘
41     },
42     //字母与数字验证
43     StrAndNum: {
44         validator: function (value) {
45             var reg = /^(\d|[a-zA-Z])+$/;
46             return reg.test(value);
47         },
48         message: ‘请输入有效的字母与数字‘
49     },
50     //一般身份证验证
51     IDCard: {
52         validator: function (value) {
53             var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
54             return reg.test(value);
55         },
56         message: ‘请输入有效的身份证‘
57     },
58     //IP验证
59     IP: {
60         validator: function (value) {
61             var reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
62             return reg.test(value);
63         },
64         message: ‘请输入有效的IP地址‘
65     },
66     //非负整数验证(且首字不为零)
67     Int: {
68         validator: function (value) {
69             var reg = /^[1-9]\d*$/;
70             return reg.test(value);
71         },
72         message: ‘请输入有效的整数‘
73     }
74 })
75 
76 
77 var Common = {
78     SexFormatter: function (value, row, index) {
79         if (row.Sex == ‘01‘) {
80             return ‘男‘;
81         } else {
82             return ‘女‘;
83         }
84     },
85     //EasyUI用DataGrid用日期格式化
86     DateFormatter: function (value, row, index) {
87 
88 
89     }
90 };