EasyUI 开发笔记(二)

接上篇： EasyUI 开发笔记(一) (http://www.cnblogs.com/yiayi/p/3485258.html)

这期就简单介绍下, easyui 的 list 展示，在easyui中叫datagrid, 其实就是html中，放个<table>然后用easyui 的datagrid 为其绑定数据。

界面如图这样:

aspx 页面代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head runat="server">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="border: 1px solid #ddd; margin-top: 4px;">
 9 <div style="padding-top: 5px;">
10                 <a href="javascript:void(0);" onclick="TabReload()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'"
11                     style="float: left;">刷新</a>
12                 <div class="tools_separator">
13                 </div>
14                 <a href="javascript:void(0);" onclick="addRole()" class="easyui-linkbutton"
15                     data-options="plain:true,iconCls:'icon-z_add'" style="float: left;">新建角色</a>
16                 <a href="javascript:void(0);" onclick="deleteRole()" class="easyui-linkbutton"
17                     data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">删除</a>
18                      <a href="javascript:void(0);" onclick="Edit()" class="easyui-linkbutton"
19                     data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">编辑</a>
20                 <a href="javascript:void(0);" onclick="fpqx()" class="easyui-linkbutton"
21                     data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">分配权限</a>
22                 <div style="clear: both;">
23                 </div>
24             </div>
25             <div class="hr">
26             </div>
27             <div id="qx_RoleListWindow"></div>
28       
29            
30             
31    <table id="qx_roleList">
32     </table>
33     <script>
34         $(function () {
35 
36             $('#qx_roleList').datagrid({
37                 url: '/admin/system/systemHandler.ashx?ajaxMethod=RoleList',
38                 title: '角色管理',
39       
40                 height: 'auto',
41                 fitColumns: true,
42                 singleSelect: true,
43                 pagination: true,
44                 rownumbers: true,
45                 idField: "RoleId",
46                 pageSize:20,
47                 pagePosition: 'both',
48                 columns: [[
49                     { field: 'RoleId', title: '角色编号',  10 },
50                     { field: 'RoleName', title: '角色名称',  80 },
51                     { field: 'RoleDesc', title: '角色备注',  80 }
52                     
53                 ]],
54                 onDblClickRow: function (rowIndex, rowData) {
55                     $('#qx_RoleListWindow').window({  300, height: 150, collapsible: false, title: "编辑角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx?RoleId=' + rowData.RoleId);
56                 }
57             });
58         })
59         function addRole() {
60             $('#qx_RoleListWindow').window({  300, height: 150, collapsible: false, title: "添加角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx');
61         }
62         function deleteRole() {
63             var row = $('#qx_roleList').datagrid('getSelected');
64             if (row) {
65                 $.messager.confirm("智能提示", "确定要删除该角色吗？", function (r) {
66                     if (r) {
67                         $.get("/admin/system/systemHandler.ashx?ajaxMethod=deleteRole&RoleId=" + row.RoleId, function (data) {
68                            if(data=="true")
69                                $('#qx_roleList').datagrid('load');
70                         })
71                     }
72                 })
73             } else {
74                 showException('请先选择数据行！');
75             }
76         }
77         function Edit() {
78             var row = $('#qx_roleList').datagrid('getSelected');
79             if (row) {
80                 $('#qx_RoleListWindow').window({  300, height: 150, collapsible: false, title: "编辑角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx?RoleId=' + row.RoleId);
81             } else {
82                 showException('请先选择数据行！');
83             }
84         }
85         function fpqx() {
86             var row = $('#qx_roleList').datagrid('getSelected');
87             if (row) {
88                 $('#qx_RoleListWindow').window({left:300,top:80, 900, height: 600, collapsible: false, title: "分配权限", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/PermissionSet.aspx?RoleId=' + row.RoleId);
89             } else {
90                 showException('请先选择数据行！');
91             }
92         }
93     </script>
94         </div>
95 </body>
96 </html>

View Code

js方法大体就是，先为<table>绑定数据，对应的字段展示，然后为这个datagrid添加记录双击事件onDblClickRow，我这里的功能，就是双击弹出这个编辑角色的对话框。

addRole 也是弹出同样的对话框，来添加操作。deleteRole为删除操作。Edit()编辑对话框，fpqx()为分配权限功能，此处展示就不做说明了。

systemHandler.ashx 部分代码:

 1   #region 获取角色列表
 2         public void GetRoleList(HttpContext context)
 3         {
 4             UserRoleMgr bll = new UserRoleMgr();
 5             List<UserRole> list = bll.GetList();
 6             var pageindex = UrlHelper.GetFormValue("page", 1);
 7             var pagesize = UrlHelper.GetFormValue("rows", 20);
 8             int totalCount = list.Count;
 9             list = list.Skip((pageindex - 1) * pagesize).Take(pagesize).ToList();
10             var timeConverter = new Newtonsoft.Json.Converters.IsoDateTimeConverter
11             {
12                 DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss"
13             };
14             var json = JsonConvert.SerializeObject(list, Formatting.Indented, timeConverter);
15             json = "{"total":" + totalCount.ToString() + ","rows":" + json + "}";
16            context.Response.Write(json);
17         }
18         #endregion

GetRoleList

 1    #region 删除角色
 2         public void DeleteRole(HttpContext context)
 3         {
 4 
 5             string roleId = UrlHelper.GetPramaValue("RoleId", "");
 6             UserRoleMgr bll = new UserRoleMgr();
 7             int int_roleid=0;
 8 
 9             if (int.TryParse(roleId, out int_roleid))
10             {
11                 if (bll.Delete(int_roleid, null) > 0)
12                     context.Response.Write("true");
13                 else
14                     context.Response.Write("false");
15             }
16             else
17                 context.Response.Write("false");
18          
19         }
20         #endregion

DeleteRole

RoleEdit.aspx 编辑对话框，部分代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head runat="server">
 5     <title></title>
 6 </head>
 7 <body>
 8     <form id="form1" runat="server">
 9         <div>
10             <table width="100%" border="0" cellspacing="0" cellpadding="0" class="formTable" style="height: 100px">
11                 <tr>
12                     <td align="right">角色名称：</td>
13                     <td align="left">
14                         <asp:TextBox ID="txtRoleName" runat="server" /></td>
15                 </tr>
16                 <tr>
17                     <td align="right">角色描述：</td>
18                     <td align="left">
19                         <asp:TextBox ID="txtRoleDesc" runat="server" />
20                         <asp:HiddenField ID="h_RoleId" runat="server" />
21                     </td>
22                 </tr>
23                 <tr>
24                     <td colspan="2" align="center">
25                         <a href="javascript:void(0);" id="qx_role_save"
26                             class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
27                     </td>
28                 </tr>
29             </table>
30         </div>
31     </form>
32     <script type="text/javascript">
33         $(function () {
34             $("#qx_role_save").click(function () {
35                 var roleName = $.trim($("#txtRoleName").val());
36                 var roleDesc = $.trim($("#txtRoleDesc").val());
37 
38                 if (roleName.length == 0) {
39                     $.messager.alert("提示", "请输入角色名称");
40                     return false;
41                 }
42                 $.post("/admin/system/systemHandler.ashx?ajaxMethod=addRole",
43                     { roleName: roleName, RoleDesc: roleDesc, RoleId: $("#h_RoleId").val() },
44                     function (data) {
45                         if (data == "true") {
46                             $.messager.alert("提示", "保存成功");
47                             $('#qx_RoleListWindow').window('close');
48                             $('#qx_roleList').datagrid('load');
49                         } else if (data == "exist") {
50                             $.messager.alert("提示", "该角色以存在，请不要重复添加");
51                         } else {
52                             $.messager.alert("提示", "保存失败");
53                         }
54                     });
55             });
56         });
57     </script>
58 </body>
59 </html>

View Code

 1  #region 添加/编辑角色
 2         public void AddRole(HttpContext context)
 3         {
 4             UserRoleMgr bll = new UserRoleMgr();
 5             UserRole role = new UserRole();
 6             role.IsLock = 0;
 7             role.CreateTime = DateTime.Now;
 8             string roleid = UrlHelper.GetFormValue("RoleId", "");
 9 
10             var roleName = UrlHelper.GetFormValue("roleName", "");
11            var desc = UrlHelper.GetFormValue("RoleDesc", "");
12             role.RoleName=roleName;
13             role.RoleDesc = desc;
14             if (roleid.Trim().Length == 0)
15             {
16                 if (!bll.ExistRole(roleName))
17                 {
18                     if (bll.Insert(role, null) > 0)
19                     {
20                         context.Response.Write("true");
21                     }
22                 }
23                 else
24                 {
25                     context.Response.Write("exist");
26                 }
27             }
28             else
29             {
30              
31                 role.RoleId = int.Parse(roleid);
32                 if (bll.Update(role, null) > 0)
33                 {
34                     context.Response.Write("true");
35                 }
36             }
37         }
38         #endregion

Add/Edit ashx code

这里偷懒了下，使用 aspx.cs 代码为<asp:textbox 赋值了。

 1  protected void Page_Load(object sender, EventArgs e)
 2         {
 3             if (!IsPostBack)
 4             {
 5                 UserRoleMgr bll = new UserRoleMgr();
 6                 string id = Request["RoleId"];
 7                 if(id!=null)
 8                 {
 9                   UserRole role=  bll.GetModel(int.Parse(id));
10                   h_RoleId.Value = id;
11                   txtRoleName.Text = role.RoleName;
12                   txtRoleDesc.Text = role.RoleDesc;
13                 }
14                
15             }
16         }

RoleEdit.aspx.cs Page_Load

over，总体没啥东西，就绑定数据，然后修改添加，就弹出页面，进行操作。在后面就是异步ashx请求，进行cs代码编写。

人不能懒，一懒就不愿意做事了，这笔记拖了一个月。。