EasyUI Grid

时间：2014-10-22 19:59:01 阅读：271 评论：0 收藏：0 [点我收藏+]

标签：des style blog http color io os ar java

  1 <script type="text/javascript">
  2     $(function () {
  3         initGrid();
  4     })
  5     //加载表格datagrid  
  6     function initGrid() {
  7         $(‘#grid‘).datagrid({
  8             title: "测试列表",
  9             url: ‘/Home/GetListByJson‘,
 10             fit: true,
 11             rownumbers: true,
 12             singleSelect: true,
 13             pagination: true,
 14             pageSize: 10,
 15             loadMsg: ‘数据加载中请稍后……‘,
 16             //数据列
 17             columns: [[
 18             { field: ‘Code‘, checkbox: true, width: 100 },
 19             { field: ‘Name‘, title: ‘名称‘, width: 100 },
 20             { field: ‘Price‘, title: ‘价格‘, width: 100 }
 21             ]],
 22             //数据列
 23             toolbar: [{
 24                 id: "btn_add",
 25                 text: "新增",
 26                 iconCls: "icon-01-02",
 27                 handler: function () {
 28 
 29                     add_edit_dialog("add");
 30 
 31                 }
 32             }, ‘-‘, {
 33                 id: "btn_edit",
 34                 text: "编辑",
 35                 disabled: true,
 36                 iconCls: "icon-17-20",
 37                 handler: function () {
 38                     var row = $("#grid").datagrid("getSelected");
 39                     if (row) {
 40 
 41                         //打开编辑对话框
 42                         //add_edit_dialog("modify", row);
 43 
 44                     }
 45 
 46                 }
 47             }, ‘-‘, {
 48                 id: "btn_del",
 49                 text: "删除",
 50                 disabled: true,
 51                 iconCls: "icon-07-08",
 52                 handler: function () {
 53                     var row = $("#grid").datagrid("getSelected");
 54                     if (row) {
 55                         $.messager.confirm("确认要删除？", function (q) {
 56                             if (q) {
 57 
 58                                 //$.post("")
 59 
 60                             }
 61                         })
 62                     }
 63                 }
 64             }],
 65 
 66             //在用户选择一行的时候触发，参数包括：
 67             //rowIndex：选择的行的索引值，索引从0开始。
 68             //rowData：对应于所选行的记录。
 69             onSelect: function (rowIndex, rowData) {
 70                 var count = $("#grid").datagrid("getSelections").length;
 71                 if (count == 1) {
 72                     $("#btn_edit").linkbutton("enable");
 73                     $("#btn_del").linkbutton("enable");
 74                 }
 75             },
 76             //在数据加载成功的时候触发。
 77             onLoadSuccess: function (data) {
 78                 $("#btn_edit").linkbutton("disable"); //按钮可用与否
 79                 $("#btn_del").linkbutton("disable");
 80             }
 81         });
 82     }
 83     //弹框
 84     function add_edit_dialog(type, row) {
 85         var title = type.toLowerCase() == "add" ? "新增" : "修改";
 86         var href = type.toLowerCase() == "add" ? "/Home/Menu" : "/admin/modifymanager";
 87         $("<div/>").dialog({
 88             title: title,
 89             href: href,
 90             modal: true,
 91             width: 550,
 92             height: 250,
 93             buttons: [{
 94                 id: "btn_save",
 95                 text: "保存",
 96                 iconCls: "icon-ok",
 97                 handler: function () {
 98 
 99                     //$("form", context.dlgedit).submit();
100 
101                 }
102             }, {
103                 id: "btn_cancel",
104                 text: "取消",
105                 iconCls: "icon-cancel",
106                 handler: function () {
107 
108                     $(context.dlgedit).dialog("close");
109 
110                 }
111             }],
112             onLoad: function () {
113 
114                 //edit_dialog(href, row);
115 
116             },
117             onClose: function () {
118                 $(this).dialog("destroy");
119             }
120         });
121     }
122 </script>

  1 /**
  2 * 文 件 名：admin.roles.js
  3 * 功能描述：角色管理页面js函数
  4 * 
  5 * 版    权：Copyright 2014-2020, YShuLin
  6 * 版    本：V1.0.0
  7 * 日    期：2014-03-18
  8 * 
  9 */
 10 
 11 // 页面初始加载方法
 12 $(function () {
 13     // 调用初始化角色列表方法
 14     InitRoleDataGrid();
 15 
 16     /** 
 17     * 初始化角色列表方法
 18 
 19     */
 20     function InitRoleDataGrid() {
 21         $("#admin_roles_datagrid").datagrid({
 22             fit: true,
 23             rownumbers: true,
 24             singleSelect: true,
 25             pagination: true,
 26             pageSize: 20,
 27             onSelect: function (rowIndex, rowData) {
 28                 var count = $("#admin_roles_datagrid").datagrid("getSelections").length;
 29                 if (count == 1) {
 30                     $("#admin_roles_datagrid_btnModify").linkbutton("enable");
 31                     $("#admin_roles_datagrid_btnRemove").linkbutton("enable");
 32                     $("#admin_roles_datagrid_btnAssignRoleGrant").linkbutton("enable");
 33                 }
 34             },
 35             onLoadSuccess: function (data) {
 36                 $("#admin_roles_datagrid_btnModify").linkbutton("disable");
 37                 $("#admin_roles_datagrid_btnRemove").linkbutton("disable");
 38                 $("#admin_roles_datagrid_btnAssignRoleGrant").linkbutton("disable");
 39             }
 40         });
 41 
 42         // 为表格工具栏添加单击事件
 43         $("#admin_roles_datagrid_btnAdd").linkbutton({
 44             plain: true,
 45             onClick: function () {
 46                 OpenEditRoleDialog("add");
 47             }
 48         });
 49         $("#admin_roles_datagrid_btnModify").linkbutton({
 50             plain: true,
 51             onClick: function () {
 52                 var row = $("#admin_roles_datagrid").datagrid("getSelected");
 53                 if (row) {
 54                     OpenEditRoleDialog("modify", row);
 55                 }
 56             }
 57         });
 58         $("#admin_roles_datagrid_btnRemove").linkbutton({
 59             plain: true,
 60             onClick: function () {
 61                 var row = $("#admin_roles_datagrid").datagrid("getSelected");
 62                 if (row) {
 63                     $.messager.confirm(‘确认删除‘, ‘您确认要删除已选择的角色吗？‘, function (r) {
 64                         if (r) {
 65                             $.post(‘/admin/deleterole‘, { id: row.Id }, function (json) {
 66                                 if (json.isSucc) {
 67                                     $("#admin_roles_datagrid").datagrid("reload");
 68                                     $.messager.show({
 69                                         title: "成功提示",
 70                                         msg: "<div class=‘messager-icon messager-info‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
 71                                     });
 72                                 } else {
 73                                     $.messager.show({
 74                                         title: "失败提示",
 75                                         msg: "<div class=‘messager-icon messager-error‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
 76                                     });
 77                                 }
 78                             }, ‘json‘);
 79                         }
 80                     });
 81                 }
 82             }
 83         });
 84         $("#admin_roles_datagrid_btnAssignRoleGrant").linkbutton({
 85             plain: true,
 86             onClick: function () {
 87                 var row = $("#admin_roles_datagrid").datagrid("getSelected");
 88                 OpenEditRoleGrantDialog(row);
 89             }
 90         });
 91         $(‘#admin_roles_datagrid_Search‘).searchbox({
 92             width: 250,
 93             searcher: function (value, name) {
 94                 //查询参数直接添加在queryParams中    
 95                 var queryParams = $(‘#admin_roles_datagrid‘).datagrid(‘options‘).queryParams;
 96                 queryParams.value = value;
 97                 $(‘#admin_roles_datagrid‘).datagrid(‘options‘).queryParams = queryParams;
 98                 $("#admin_roles_datagrid").datagrid(‘reload‘);
 99             },
100             prompt: ‘请输入角色名称关键字‘
101         });
102     }
103 
104     /** 
105     * 打开编辑角色对话框
106 
107 
108     * @param {string} editType
109     * @param {object} data
110     */
111     function OpenEditRoleDialog(editType, data) {
112         var title = editType.toLowerCase() == "add" ? "新增角色信息" : "修改角色信息";
113         var href = editType.toLowerCase() == "add" ? "/admin/addrole" : "/admin/modifyrole";
114         var dlgEditRole = $("<div/>").dialog({
115             id: "admin_roles_dlgEdit",
116             title: title,
117             href: href,
118             modal: true,
119             width: 450,
120             buttons: [{
121                 id: "admin_roles_dlgEdit_btnSave",
122                 text: "保存",
123                 iconCls: "icon-ok",
124                 handler: function () {
125                     $(‘#admin_roles_dlgEdit form‘).submit();
126                 }
127             }, {
128                 id: "admin_roles_dlgEdit_btnCancel",
129                 text: "取消",
130                 iconCls: "icon-cancel",
131                 handler: function () {
132                     $(dlgEditRole).dialog("close");
133                 }
134             }],
135             onLoad: function () {
136                 // 初始化角色表单
137                 InitRoleForm(href, data);
138             },
139             onClose: function () {
140                 $(this).dialog("destroy");
141             }
142         });
143     }
144 
145     /** 
146     * 初始化角色表单
147 
148     * @param {string} url
149     * @param {object} data
150     */
151     function InitRoleForm(url, data) {
152         var fmEditRole = $(‘#admin_roles_dlgEdit form‘).EasyuiAjaxForm({
153             url: url,
154             onSubmit: function () {
155                 // 初始化验证规则
156                 $("#admin_roles_dlgEdit #Name").validatebox({
157                     required: true,
158                     missingMessage: ‘请输入角色名称‘,
159                     validType: null
160                 });
161 
162                 //验证表单数据有效性
163                 if ($(fmEditRole).form(‘validate‘)) {
164                     $(‘#admin_roles_dlgEdit_btnSave‘).linkbutton(‘disable‘);
165                     $(‘#admin_roles_dlgEdit_btnCancel‘).linkbutton(‘disable‘);
166                     return true;
167                 } else {
168                     return false;
169                 }
170             },
171             success: function (data) {
172                 $(‘#admin_roles_dlgEdit_btnSave‘).linkbutton(‘enable‘);
173                 $(‘#admin_roles_dlgEdit_btnCancel‘).linkbutton(‘enable‘);
174 
175                 var json = jQuery.parseJSON(data);
176                 if (json.isSucc) {
177                     //表单提交成功
178                     $("#admin_roles_datagrid").datagrid("reload");
179                     $("#admin_roles_dlgEdit").dialog("close");
180                     $.messager.show({
181                         title: "成功提示",
182                         msg: "<div class=‘messager-icon messager-info‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
183                     });
184                 } else {
185                     //表单提交失败
186                     if (json.resultMsg != null) {
187                         $.messager.show({
188                             title: "失败提示",
189                             msg: "<div class=‘messager-icon messager-error‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
190                         });
191                     } else {
192                         $.each(json.errors, function (i, n) {
193                             $(‘#admin_roles_dlgEdit #‘ + n.id).validatebox({ validType: ‘fail["‘ + n.val + ‘"]‘, invalidMessage: n.msg }).validatebox(‘validate‘).focus();
194                         });
195                     }
196                 }
197             }
198         });
199 
200         // 加载表单数据
201         if (data != undefined) {
202             $(fmEditRole).form("load", data);
203         }
204     }
205 
206     /** 
207     * 打开编辑角色权限对话框
208 
209 
210     * @param {object} data
211     */
212     function OpenEditRoleGrantDialog(data) {
213         var dlgGrantEdit = $("<div/>").dialog({
214             id: "admin_roles_dlgGrantEdit",
215             title: "为角色分配权限",
216             href: "/admin/saverolegrant",
217             modal: true,
218             width: 830,
219             height: 430,
220             buttons: [{
221                 id: "admin_roles_dlgGrantEdit_btnSave",
222                 text: "保存",
223                 iconCls: "icon-ok",
224                 handler: function () {
225                     $(‘#admin_roles_dlgGrantEdit form‘).submit();
226                 }
227             }, {
228                 id: "admin_roles_dlgGrantEdit_btnCancel",
229                 text: "取消",
230                 iconCls: "icon-cancel",
231                 handler: function () {
232                     $(dlgGrantEdit).dialog("close");
233                 }
234             }],
235             onLoad: function () {
236                 // 初始化角色权限编辑表单
237                 InitRolGranteForm(data);
238             },
239             onClose: function () {
240                 $(this).dialog("destroy");
241             }
242         });
243     }
244 
245     /** 
246     * 初始化角色权限编辑表单
247 
248 
249     * @param {object} data
250     */
251     function InitRolGranteForm(data) {
252         var fmEditRole = $(‘#admin_roles_dlgGrantEdit form‘).EasyuiAjaxForm({
253             url: $(this).attr("action"),
254             onSubmit: function () {
255                 //验证表单数据有效性
256                 if ($(fmEditRole).form(‘validate‘)) {
257                     $(‘#admin_roles_dlgGrantEdit_btnSave‘).linkbutton(‘disable‘);
258                     $(‘#admin_roles_dlgGrantEdit_btnCancel‘).linkbutton(‘disable‘);
259                     return true;
260                 } else {
261                     return false;
262                 }
263             },
264             success: function (data) {
265                 $(‘#admin_roles_dlgGrantEdit_btnSave‘).linkbutton(‘enable‘);
266                 $(‘#admin_roles_dlgGrantEdit_btnCancel‘).linkbutton(‘enable‘);
267 
268                 var json = jQuery.parseJSON(data);
269                 if (json.isSucc) {
270                     //表单提交成功
271                     $("#admin_roles_datagrid").datagrid("reload");
272                     $("#admin_roles_dlgGrantEdit").dialog("close");
273                     $.messager.show({
274                         title: "成功提示",
275                         msg: "<div class=‘messager-icon messager-info‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
276                     });
277                 } else {
278                     //表单提交失败
279                     if (json.resultMsg != null) {
280                         $.messager.show({
281                             title: "失败提示",
282                             msg: "<div class=‘messager-icon messager-error‘></div><div>" + json.resultMsg + "</div><div style=‘clear: both;‘></div>"
283                         });
284                     } else {
285                         $.each(json.errors, function (i, n) {
286                             $(‘#admin_roles_dlgGrantEdit #‘ + n.id).validatebox({ validType: ‘fail["‘ + n.val + ‘"]‘, invalidMessage: n.msg }).validatebox(‘validate‘).focus();
287                         });
288                     }
289                 }
290             }
291         });
292 
293         // 初始化角色信息
294         $("#admin_roles_dlgGrantEdit #roleId").val(data.Id);
295         $("#admin_roles_dlgGrantEdit #roleName").val(data.Name);
296 
297         // 初始化菜单树
298         var menuTree = $("#admin_roles_dlgGrantEdit #menuTree").tree({
299             url: "/admin/getmenutree",
300             checkbox: true,
301             onSelect: function (node) {
302                 // 查询第一个表格标识Id
303                 $.post("/admin/getfirstpagegridId", { menuId: node.id }, function (data) {
304                     if (data.gridId != "") {
305                         var buttonNode = $(buttonTree).tree("find", data.gridId);
306                         if (buttonNode) {
307                             $(buttonTree).tree("scrollTo", buttonNode.target);
308                         }
309 
310                         var fieldNode = $(fieldTree).tree("find", data.gridId);
311                         if (fieldNode) {
312                             $(fieldTree).tree("scrollTo", fieldNode.target);
313                         }
314                     }
315                 }, "json");
316             },
317             onCheck: function (node, checked) {
318                 var menuIds = [];
319                 var nodes = $(this).tree("getChecked", ["checked", "indeterminate"]);
320                 if (nodes) {
321                     for (var i = 0; i < nodes.length; i++) {
322                         menuIds.push(nodes[i].id);
323                     }
324                 }
325                 $("#menuIds").val(menuIds.join(","));
326             },
327             onLoadSuccess: function () {
328                 // 查询并选中已分配的菜单权限
329                 $.post("/admin/getrolemenu", { roleId: data.Id }, function (data) {
330                     if (data.length > 0) {
331                         $.each(data, function (i, n) {
332                             var node = $(menuTree).tree("find", n);
333                             if (node) {
334                                 if ($(menuTree).tree("isLeaf", node.target)) {
335                                     $(menuTree).tree("check", node.target);
336                                 }
337                             }
338                         });
339                     }
340                 }, "json");
341             }
342         });
343 
344         // 初始化表格按钮树
345         var buttonTree = $("#admin_roles_dlgGrantEdit #buttonTree").tree({
346             url: "/admin/getgridbuttontree",
347             checkbox: true,
348             width: 250,
349             height: 250,
350             onCheck: function (node, checked) {
351                 var buttonIds = [];
352                 var nodes = $(this).tree("getChecked", ["checked", "indeterminate"]);
353                 if (nodes) {
354                     for (var i = 0; i < nodes.length; i++) {
355                         buttonIds.push(nodes[i].id);
356                     }
357                 }
358                 $("#buttonIds").val(buttonIds.join(","));
359             },
360             onLoadSuccess: function () {
361                 // 查询并选中已分配的表格按钮权限
362                 $.post("/admin/getrolegridbutton", { roleId: data.Id }, function (data) {
363                     if (data.length > 0) {
364                         $.each(data, function (i, n) {
365                             var node = $(buttonTree).tree("find", n);
366                             if (node) {
367                                 if ($(buttonTree).tree("isLeaf", node.target)) {
368                                     $(buttonTree).tree("check", node.target);
369                                 }
370                             }
371                         });
372                     }
373                 }, "json");
374             }
375         });
376 
377         // 初始化表格字段树
378         var fieldTree = $("#admin_roles_dlgGrantEdit #fieldTree").tree({
379             url: "/admin/getgridfieldtree",
380             checkbox: true,
381             onCheck: function (node, checked) {
382                 var fieldIds = [];
383                 var nodes = $(this).tree("getChecked", ["checked", "indeterminate"]);
384                 if (nodes) {
385                     for (var i = 0; i < nodes.length; i++) {
386                         fieldIds.push(nodes[i].id);
387                     }
388                 }
389                 $("#fieldIds").val(fieldIds.join(","));
390             },
391             onLoadSuccess: function () {
392                 // 查询并选中已分配的表格字段权限
393                 $.post("/admin/getrolegridfield", { roleId: data.Id }, function (data) {
394                     if (data.length > 0) {
395                         $.each(data, function (i, n) {
396                             var node = $(fieldTree).tree("find", n);
397                             if (node) {
398                                 if ($(fieldTree).tree("isLeaf", node.target)) {
399                                     $(fieldTree).tree("check", node.target);
400                                 }
401                             }
402                         });
403                     }
404                 }, "json");
405             }
406         });
407     }
408 
409 
410 });

View Code

EasyUI Grid

标签：des style blog http color io os ar java

原文地址：http://www.cnblogs.com/wzk153/p/4043877.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行