接上篇 ： 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: ‘角色编号‘, 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>
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
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
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>
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
这里偷懒了下，使用 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 }
over，总体没啥东西，就绑定数据，然后修改 添加，就弹出页面，进行操作。在后面就是异步ashx请求，进行cs代码编写。
人不能懒，一懒就不愿意做事了，这笔记拖了一个月。。
【版权声明】转载请注明出处： http://www.cnblogs.com/yiayi/p/3526624.html