EasyUI 开发笔记(二)

 

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

 

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

界面如图这样: 

EasyUI 开发笔记(二)

 

aspx 页面代码: 

EasyUI 开发笔记(二)
 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: 角色编号, width: 10 },
50                     { field: RoleName, title: 角色名称, width: 80 },
51                     { field: RoleDesc, title: 角色备注, width: 80 }
52                     
53                 ]],
54                 onDblClickRow: function (rowIndex, rowData) {
55                     $(#qx_RoleListWindow).window({ width: 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({ width: 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({ width: 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,width: 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 部分代码: 

EasyUI 开发笔记(二)
 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

 

EasyUI 开发笔记(二)
 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 编辑对话框,部分代码: 

EasyUI 开发笔记(二)
 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
EasyUI 开发笔记(二)
 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 赋值了。

EasyUI 开发笔记(二)
 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代码编写。

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

 

 【版权声明】转载请注明出处: http://www.cnblogs.com/yiayi/p/3526624.html  

EasyUI 开发笔记(二)

上一篇:Delphi中限制文本框(TEdit)只能输入数字


下一篇:linux 虚拟文件系统----------Virtual File System VFSkky