EasyUi Demo框架源码

时间：2015-04-06 11:24:32 阅读：223 评论：0 收藏：0 [点我收藏+]

截图：

技术分享

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PurviewManage.aspx.cs"
    Inherits="XQH.EasyUi.Web.Web.PurviewManage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../JQueryEasyUi/icon.css" rel="stylesheet" type="text/css" />
    <link href="../JQueryEasyUi/default/easyui.css" rel="stylesheet" type="text/css" />
    <script src="../JQueryEasyUi/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../JQueryEasyUi/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //角色ID 全局变量
        var RoleId;

        $(function () {

            $(‘#roleManageGrid‘).datagrid({
                //title: ‘角色管理‘,
                //iconCls: ‘icon-save‘,
                collapsible: false,
                fitColumns: true,
                singleSelect: true,
                remoteSort: false,
                sortName: ‘RoleName‘,
                sortOrder: ‘desc‘,
                nowrap: true,
                method: ‘get‘,
                loadMsg: ‘正在加载数据...‘,
                url: ‘../Service/EasyUiService.ashx?Method=GetRoleInfo‘,
                frozenColumns: [[
                    { field: ‘ck‘, checkbox: true }
                ]],
                columns: [[
                    { field: ‘RoleId‘, title: ‘角色ID‘, width: 80, sortable: true },
                    { field: ‘RoleName‘, title: ‘角色名称‘, width: 100, sortable: true },
                    { field: ‘RoleDes‘, title: ‘角色描述‘, width: 100 }
                ]],
                pagination: true,
                pageNumber: 1,
                rownumbers: true,
                toolbar:
                [
                    {
                        id: ‘btnAdd‘,
                        text: ‘添加角色‘,
                        iconCls: ‘icon-add‘,
                        handler: function () {
                            $("#roleName").val("");
                            $("#roleDes").val("");
                            addRoleDialog();
                        }
                    },
                    ‘-‘,
                    {
                        id: ‘btnEdit‘,
                        text: ‘编辑角色‘,
                        iconCls: ‘icon-edit‘,
                        handler: function () {
                            var selected = $(‘#roleManageGrid‘).datagrid(‘getSelected‘);
                            if (selected) {
                                var roleId = selected.RoleId;
                                var roleName = selected.RoleName;
                                var roleDes = selected.RoleDes;
                                $("#roleName").val(roleName);
                                $("#roleDes").val(roleDes);
                                editRoleDialog();
                            }
                        }
                    },
                    ‘-‘,
                    {
                        id: ‘btnDelete‘,
                        text: ‘删除角色‘,
                        disabled: true,
                        iconCls: ‘icon-remove‘,
                        handler: function () {
                        }
                    }
                ],
                onLoadSuccess: function () {
                    //$("#roleManageGrid").datagrid(‘reload‘);
                },
                onClickRow: function (rowIndex, rowData) {
                    var roleId = rowData.RoleId;
                    loadTree(roleId);
                    RoleId = roleId;
                }
            });
        });

        //加载树
        function loadTree(roleId) {
            $("#permissionTree").tree({
                checkbox: true,
                onlyLeafCheck: true,
                url: ‘../Service/EasyUiService.ashx?Method=SetPermissionTree&RoleId=‘ + encodeURI(roleId),
                onClick: function (node) {
                    $(this).tree(‘toggle‘, node.target);
                },
                onCheck: function (node, checked) {
                    var checked = node.checked;
                    var roleId = RoleId;
                    var permissionId = node.id;
                    setPermission(checked, roleId, permissionId);
                    //alert(i);
                }
            });
        }

        //设置权限
        function setPermission(checked, roleId, permissionId) {
            $.ajax({
                type: "POST",
                dataType: "json",
                //cache:true,
                url: "../Service/EasyUiService.ashx?Method=SetPermission",
                data: { IsChecked: checked, RoleId: roleId, PermissionId: permissionId },
                success: function (json) {
                },
                error: function () {
                    $.messager.alert(‘错误‘, ‘设置权限失败...请联系管理员!‘, ‘error‘);
                }
            });
        }

        //添加角色对话框
        function addRoleDialog() {
            $("#dialogAddRole").show();
            $("#dialogAddRole").attr("title", "添加角色");

            $("#dialogAddRole").dialog({
                width: 500,
                height: 200,
                draggable: true,
                resizable: false,
                modal: true,
                buttons:
                    [
                        {
                            text: ‘提交‘,
                            iconCls: ‘icon-ok‘,
                            handler: function () {

                            }
                        },
                        {
                            text: ‘取消‘,
                            handler: function () {
                                $(‘#dialogAddRole‘).dialog(‘close‘);
                            }
                        }
                    ]
            });
        }

        //编辑角色对话框
        function editRoleDialog() {
            $("#dialogAddRole").show();
            $("#dialogAddRole").attr("title", "编辑角色");

            $("#dialogAddRole").dialog({
                width: 500,
                height: 200,
                draggable: true,
                resizable: false,
                modal: true,
                buttons:
                    [
                        {
                            text: ‘提交‘,
                            iconCls: ‘icon-ok‘,
                            handler: function () {

                            }
                        },
                        {
                            text: ‘取消‘,
                            handler: function () {
                                $(‘#dialogAddRole‘).dialog(‘close‘);
                            }
                        }
                    ]
            });
        }
    </script>
</head>
<body class="easyui-layout">
    <div region="west" split="true" title="权限树" style="width: 200px;">
        <ul id="permissionTree">
        </ul>
    </div>
    <div region="center" title="角色管理">
        <table id="roleManageGrid" fit="true">
        </table>
    </div>
    <div id="dialogAddRole" icon="icon-add" title="添加角色" style="display: none;">
        <div style="width: 460px; height: 100px; font-size: 12px; color: Black;">
            <table style="width: 450px; height: 100px; margin-left: 20px; margin-top: 15px;">
                <tr>
                    <td valign="middle" style="width: 100px">
                        角色名称：
                    </td>
                    <td valign="middle" style="width: 370px">
                        <input id="roleName" type="text" style="width: 350px" />
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        角色描述：
                    </td>
                    <td valign="middle" style="width: 370px">
                        <textarea id="roleDes" rows="4" cols="10" style="width: 350px;"></textarea>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PurviewManage.aspx.cs"
  2     Inherits="XQH.EasyUi.Web.Web.PurviewManage" %>
  3 
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title></title>
  8     <link href="../JQueryEasyUi/icon.css" rel="stylesheet" type="text/css" />
  9     <link href="../JQueryEasyUi/default/easyui.css" rel="stylesheet" type="text/css" />
 10     <script src="../JQueryEasyUi/jquery-1.4.2.min.js" type="text/javascript"></script>
 11     <script src="../JQueryEasyUi/jquery.easyui.min.js" type="text/javascript"></script>
 12     <script type="text/javascript">
 13         //角色ID 全局变量
 14         var RoleId;
 15 
 16         $(function () {
 17 
 18             $(‘#roleManageGrid‘).datagrid({
 19                 //title: ‘角色管理‘,
 20                 //iconCls: ‘icon-save‘,
 21                 collapsible: false,
 22                 fitColumns: true,
 23                 singleSelect: true,
 24                 remoteSort: false,
 25                 sortName: ‘RoleName‘,
 26                 sortOrder: ‘desc‘,
 27                 nowrap: true,
 28                 method: ‘get‘,
 29                 loadMsg: ‘正在加载数据...‘,
 30                 url: ‘../Service/EasyUiService.ashx?Method=GetRoleInfo‘,
 31                 frozenColumns: [[
 32                     { field: ‘ck‘, checkbox: true }
 33                 ]],
 34                 columns: [[
 35                     { field: ‘RoleId‘, title: ‘角色ID‘, width: 80, sortable: true },
 36                     { field: ‘RoleName‘, title: ‘角色名称‘, width: 100, sortable: true },
 37                     { field: ‘RoleDes‘, title: ‘角色描述‘, width: 100 }
 38                 ]],
 39                 pagination: true,
 40                 pageNumber: 1,
 41                 rownumbers: true,
 42                 toolbar:
 43                 [
 44                     {
 45                         id: ‘btnAdd‘,
 46                         text: ‘添加角色‘,
 47                         iconCls: ‘icon-add‘,
 48                         handler: function () {
 49                             $("#roleName").val("");
 50                             $("#roleDes").val("");
 51                             addRoleDialog();
 52                         }
 53                     },
 54                     ‘-‘,
 55                     {
 56                         id: ‘btnEdit‘,
 57                         text: ‘编辑角色‘,
 58                         iconCls: ‘icon-edit‘,
 59                         handler: function () {
 60                             var selected = $(‘#roleManageGrid‘).datagrid(‘getSelected‘);
 61                             if (selected) {
 62                                 var roleId = selected.RoleId;
 63                                 var roleName = selected.RoleName;
 64                                 var roleDes = selected.RoleDes;
 65                                 $("#roleName").val(roleName);
 66                                 $("#roleDes").val(roleDes);
 67                                 editRoleDialog();
 68                             }
 69                         }
 70                     },
 71                     ‘-‘,
 72                     {
 73                         id: ‘btnDelete‘,
 74                         text: ‘删除角色‘,
 75                         disabled: true,
 76                         iconCls: ‘icon-remove‘,
 77                         handler: function () {
 78                         }
 79                     }
 80                 ],
 81                 onLoadSuccess: function () {
 82                     //$("#roleManageGrid").datagrid(‘reload‘);
 83                 },
 84                 onClickRow: function (rowIndex, rowData) {
 85                     var roleId = rowData.RoleId;
 86                     loadTree(roleId);
 87                     RoleId = roleId;
 88                 }
 89             });
 90         });
 91 
 92         //加载树
 93         function loadTree(roleId) {
 94             $("#permissionTree").tree({
 95                 checkbox: true,
 96                 onlyLeafCheck: true,
 97                 url: ‘../Service/EasyUiService.ashx?Method=SetPermissionTree&RoleId=‘ + encodeURI(roleId),
 98                 onClick: function (node) {
 99                     $(this).tree(‘toggle‘, node.target);
100                 },
101                 onCheck: function (node, checked) {
102                     var checked = node.checked;
103                     var roleId = RoleId;
104                     var permissionId = node.id;
105                     setPermission(checked, roleId, permissionId);
106                     //alert(i);
107                 }
108             });
109         }
110 
111         //设置权限
112         function setPermission(checked, roleId, permissionId) {
113             $.ajax({
114                 type: "POST",
115                 dataType: "json",
116                 //cache:true,
117                 url: "../Service/EasyUiService.ashx?Method=SetPermission",
118                 data: { IsChecked: checked, RoleId: roleId, PermissionId: permissionId },
119                 success: function (json) {
120                 },
121                 error: function () {
122                     $.messager.alert(‘错误‘, ‘设置权限失败...请联系管理员!‘, ‘error‘);
123                 }
124             });
125         }
126 
127         //添加角色对话框
128         function addRoleDialog() {
129             $("#dialogAddRole").show();
130             $("#dialogAddRole").attr("title", "添加角色");
131 
132             $("#dialogAddRole").dialog({
133                 width: 500,
134                 height: 200,
135                 draggable: true,
136                 resizable: false,
137                 modal: true,
138                 buttons:
139                     [
140                         {
141                             text: ‘提交‘,
142                             iconCls: ‘icon-ok‘,
143                             handler: function () {
144 
145                             }
146                         },
147                         {
148                             text: ‘取消‘,
149                             handler: function () {
150                                 $(‘#dialogAddRole‘).dialog(‘close‘);
151                             }
152                         }
153                     ]
154             });
155         }
156 
157         //编辑角色对话框
158         function editRoleDialog() {
159             $("#dialogAddRole").show();
160             $("#dialogAddRole").attr("title", "编辑角色");
161 
162             $("#dialogAddRole").dialog({
163                 width: 500,
164                 height: 200,
165                 draggable: true,
166                 resizable: false,
167                 modal: true,
168                 buttons:
169                     [
170                         {
171                             text: ‘提交‘,
172                             iconCls: ‘icon-ok‘,
173                             handler: function () {
174 
175                             }
176                         },
177                         {
178                             text: ‘取消‘,
179                             handler: function () {
180                                 $(‘#dialogAddRole‘).dialog(‘close‘);
181                             }
182                         }
183                     ]
184             });
185         }
186     </script>
187 </head>
188 <body class="easyui-layout">
189     <div region="west" split="true" title="权限树" style="width: 200px;">
190         <ul id="permissionTree">
191         </ul>
192     </div>
193     <div region="center" title="角色管理">
194         <table id="roleManageGrid" fit="true">
195         </table>
196     </div>
197     <div id="dialogAddRole" icon="icon-add" title="添加角色" style="display: none;">
198         <div style="width: 460px; height: 100px; font-size: 12px; color: Black;">
199             <table style="width: 450px; height: 100px; margin-left: 20px; margin-top: 15px;">
200                 <tr>
201                     <td valign="middle" style="width: 100px">
202                         角色名称：
203                     </td>
204                     <td valign="middle" style="width: 370px">
205                         <input id="roleName" type="text" style="width: 350px" />
206                     </td>
207                 </tr>
208                 <tr>
209                     <td valign="top">
210                         角色描述：
211                     </td>
212                     <td valign="middle" style="width: 370px">
213                         <textarea id="roleDes" rows="4" cols="10" style="width: 350px;"></textarea>
214                     </td>
215                 </tr>
216             </table>
217         </div>
218     </div>
219 </body>
220 </html>

源码下载

EasyUi Demo框架源码

原文：http://www.cnblogs.com/reno2020/p/4395602.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)