一、前三篇的內容是否對您有幫助呢？如果有的話，請您繼續關注這篇吧，這篇主要是實現”用戶管理“的功能，多種方式的增刪改查，以 及對用戶權限的分配，查詢的時候，下面左截圖中，用戶姓名的模糊查詢，輸入w,包含w的用戶名顯示在下拉框中，如果數據太多，也可以使用Jquery-EasyUI的CommboGrid，請看下面的右截圖。
(1)用戶管理的“增刪改查”，一個最基本的功能了，但是在Jquery-EasyUI中有多種方式進行增刪改查。如下圖：
(2)、在這個用戶管理里，也可以對應的實現一個用戶的權限分配功能，使用ZTree樹結構的方式清晰的分配，當然使用Jquery-EasyUI的Tree也可以。
二、廢話少說，趕快實現前面展示的這些功能吧！
1、首先是展示數據的部分，使用的是Jquery-EasyUI的Datagrid，其中是帶分頁的，屬性設置（pagination: true,），返回的數據是Json類型（total:總條數，rows：詳細數據，一個集合類型）。
2、MVC中ActionResult的小弟里有個JsonResult，正好返回Json類型，不需要Json序列化。
3、由於帶分頁，前台肯定得傳值，Request["page"](當前頁)，Request["rows"](分頁大小)，我這個使用的傳統的方式，由於這個是MVC項目，也可以 利用MVC中的ModelBinder。或者使用這種方式public ActionResult UserManeger(int page,int rows)，使用火狐瀏覽器的Firebug，調試看看傳過去的參數。
4、Jquery-EasyUI中有兩種方式進行渲染，一個是在標簽中直接寫，還有一種方式是Jquery的形式，這個功能中用的是Jquery的方式，每一塊代碼部分都有解釋和說說明，包括（右鍵行出現Menu、增刪改查的功能，Jquery-EasyUI的每個屬性如果不熟悉的話，建議看看官網的例子。如果挨個解釋的話，內容確實太多了。）
//用戶管理 public ViewResult UserManeger() { return View(); } [HttpPost] public ActionResult UserManeger(string name,string SubAction) { int pageSize = 5; int pageIndex = 1; int.TryParse(this.Request["page"], out pageIndex); int.TryParse(this.Request["rows"], out pageSize); pageSize = pageSize <= 0 ? 5 : pageSize; pageIndex = pageIndex < 1 ? 1 : pageIndex; var UserList = userBll.GetAll(); var temp = UserList .OrderBy(u => u.UserName) .WhereIf(u => u.UserName.Contains(name), name != null) .Skip<User>((pageIndex - 1) * pageSize) .Take<User>(pageSize) .ToList(); Hashtable ht = new Hashtable(); ht["total"] = UserList.Count(); ht["rows"] = temp; return Json(ht, JsonRequestBehavior.AllowGet); }
@{ ViewBag.Title = "用戶管理"; Layout = "~/Areas/houtai/Views/Shared/_JS.cshtml"; } <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用戶管理</title> </head> <body> <script type="text/javascript"> $.canEdit = true; </script> <script type="text/javascript"> $.canDelete = true; </script> <script type="text/javascript"> $.canGrant = true; </script> <script type="text/javascript"> function editFun() { alert("編輯"); } </script> <script type="text/javascript"> // var editFlag = undefined; $(function () { initable(); bindRegistButtonClickEvent(); upDateUserDll(); $('#cc').combobox({ mode: 'remote', url: "@Url.Action("UserList","Privilige")", valueField: 'UserName', textField: 'UserName' }); }); </script> <div class="easyui-tabs" id="centerTab" fit="true" border="false"> <div title="用戶表數據" boreder="false" fit="true" closable="true"> <div class="easyui-layout" fit="true" border="false"> <div data-options="region:'north',title:'高級查詢'" style="height: 70px; background: #F4F4F4;"> @using (Html.BeginForm("UserManeger", "Privilige", FormMethod.Post, new { id = "searchForm" })) { <table> <tr> <th> 用戶姓名： </th> <td> @*<input name="name" />*@ @*<input id="cc" name="name" style="width:170px;" /> *@ <input id="cc" placeholder="可以模糊查詢" name="name"/> </td> <td> <input id="ss" class="easyui-searchbox" prompt="請輸入查詢內容" style="width:150px;" /> </td> <td> <a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();">查找</a> </td> <td> <a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();">清空</a> </td> </tr> </table> } </div> <div data-options="region:'center',split:false"> <table id="datagrid"> </table> </div> <div region="south" href="" title="" style="overflow:hidden;height:100px;"> </div> </div> </div> </div> <!----------------------------右鍵菜單（暫時未用）----------------------------------------------> <div id="menu" class="easyui-menu" style="width: 120px; display: none"> <div onclick="" iconcls="icon-add"> 增加</div> <div onclick="" iconcls="icon-remove"> 刪除</div> <div onclick="editorMethod();" iconcls="icon-edit"> 修改</div> </div> <!---------------------------添加用戶信息-------------------------------------------> <div id="divAddUser" class="easyui-dialog" closed="true"> <form id="ff" method="post" novalidate="novalidate"> <table> <tr> <td> 用戶名：</td> <td><input class="easyui-validatebox" type="text" name="UName" id="UName" data-options="required:true,validType:'length[1,32]'"/></td> </tr> <tr><td>密碼：</td> <td><input class="easyui-validatebox" type="password" name="Pwd" id="Pwd" data-options="required:true,validType:'length[1,32]'"/></td> </tr> <tr><td>姓名：</td> <td><input type="text" name="PersonName" id="PersonName"/></td> </tr> <tr> <td colspan="2"> @*<input type="submit" id="btnRegist" value="注冊"/> *@ <a href="javascript:void(0)" class="easyui-linkbutton" id="btnRegist" iconcls="icon-ok" >確定</a> </td> </tr> </table> </form> </div> <!---------------------------修改用戶信息-------------------------------------------> <div id="divUpdateUser" class="easyui-dialog" closed="true"> <table> <tr> <td><input type="hidden" name="ID" id="IDUpdate"/></td> </tr> <tr> <td> 用戶名：</td> <td><input type="text" id="UNameUpdate" name="UName"/></td> </tr> <tr><td>密碼：</td> <td><input type="password" name="Pwd" id="PwdUpdate"/></td> </tr> <tr><td>姓名：</td> <td><input type="text" name="PersonName" id="PersonNameUpdate"/></td> </tr> <tr> <td colspan="2"> <input type="submit" id="btnUpdate" value="修改"/> </td> </tr> </table> </div> <!---------------------------分配用戶權限-------------------------------------------> <div id="UserRole" class="easyui-dialog" closed="true"> <iframe id="iframeSetUserRole" src="" scrolling="yes" frameborder="0" width="100%" height="100%"></iframe> </div> <!---------------------------右鍵菜單-------------------------------------------> <div id="Usermenu" class="easyui-menu" style="width:120px;display:none"> <div onclick="showCreateUserDialog();" iconCls="icon-add">增加</div> <div onclick="deleteUser()" iconCls="icon-remove">刪除</div> <div onclick="updateUserInfo();" iconCls="icon-edit">修改</div> </div> </body> </html>
//------------------------系統管理-->用戶管理-----------------------------------------// //刷新數據 function initable() { $("#datagrid").datagrid({ url: "/Privilige/UserManeger", title: "用戶表", pagination: true, pageSize: 10, pageList: [10, 20, 30], fit: true, fitColumns: false, loadMsg: "正在加載用戶的信息...", nowarp: false, border: false, idField: "ID", sortName: "ID", sortOrder: "asc", frozenColumns: [[//凍結列 {field: "ck", checkbox: true, align: "left", width: 50 }, { title: "編號", field: "ID", width: 100, sortable: true } ]], columns: [[ { title: "用戶名", field: "UserName", width: 100, sortable: true, formatter: function (value, rowData, rowIndex) { return "<span title=" + value + ">" + value + "</span>" } }, { title: "密碼", field: "PassWord",width: 100, sortable: true, formatter: function (value, rowData, rowIndex) { return "******"; } }, { title: "姓名", field: "PersonName", width: 100, sortable: true }, { title: "是否用加密鎖", field: "IsUseKey", width: 100, sortable: true, formatter: function (value, rowData, rowIndex) { if (rowData.IsUseKey == 1) { return "<span title='是'>是</span>" } else { return "<span title='否'>否</span>" } } }, { title: "加密鎖號", field: "KeyPassword", width: 150 }, {title: "操作",field:"ActionID",width: 70,formatter: function (value, row, index) { var str = ''; if ($.canEdit) { str += $.formatString('<img onclick="updateUserInfo(\'{0}\');" src="{1}" title="編輯"/>', row.id, '/images/edit.png'); } str += ' '; if ($.canGrant) { str += $.formatString('<img onclick="showCreateUserDialog();" src="{0}" title="添加"/>', '/jquery-easyui-1.3.2/themes/icons/edit_add.png'); } str += ' '; if ($.canDelete) { str += $.formatString('<img onclick="" src="{0}" title="刪除"/>', '/jquery-easyui-1.3.2/themes/icons/cancel.png'); } return str; } } ]], toolbar: [ { id: "btnadd", iconCls: "icon-add", text: "添加用戶", handler: function () { showCreateUserDialog(); } }, "--", { id: "btnDownShelf", text: "修改用戶", iconCls: "icon-edit", handler: function () { updateUserInfo(); //console.info(rows[0].ID); } }, "--", { text: "撤銷", iconCls: "icon-redo", handler: function () { $("#datagrid").datagrid("rejectChanges"); $("#datagrid").datagrid("unselectAll"); } }, "--", { id: "btnDel", text: "刪除用戶", iconCls: "icon-cancel", handler: function () { deleteUser(); } }, "--", { id: "btnFenPei", text: "分配權限", iconCls: "icon-edit", handler: function () { SetUserLimit(); } }, "--" ], onRowContextMenu: function (e, rowIndex, rowData) { //console.info(rowData); e.preventDefault(); $(this).datagrid("unselectAll"); $(this).datagrid("selectRow", rowIndex); $("#Usermenu").menu("show", { left: e.pageX, top: e.pageY }); } }); } //修改點擊按鈕事件 function upDateUserDll(){ $("#btnUpdate").click(function(){ var postData = { ID:$("#IDUpdate").val(), UName: $("#UNameUpdate").val(), Pwd: $("#PwdUpdate").val(), PersonName: $("#PersonNameUpdate").val() }; $.post("/Privilige/UpdateUser", postData, function (data) { if (data == "Yes") { $("#divUpdateUser").dialog("close"); $.messager.alert("提示", "修改成功！"); initable(); } else if (data == "No") { $.messager.alert("提示", "密碼不能為空！"); return; } }); }); } //刪除用戶 function deleteUser() { var rows = $("#datagrid").datagrid("getSelections"); if (rows.length > 0) { $.messager.confirm("提示", "確定要刪除嗎?", function (res) { if (res) { var codes = []; //重要不是{} for (var i = 0; i < rows.length; i++) { codes.push(rows[i].ID); } $.post("/Privilige/Del", { "ids": codes.join(',') }, function (data) { if (data == "Yes") { $.messager.alert("提示", "刪除成功！"); $("#datagrid").datagrid("load", {}); } }); } }); } } //修改用戶信息 function updateUserInfo() { var rows = $("#datagrid").datagrid("getSelections"); if (rows.length != 1) { $.messager.alert("提示", "請選擇一條數據！"); return; } else { //處理修改：彈出修改的對話框 $("#IDUpdate").val(rows[0].ID); $("#UNameUpdate").val(rows[0].UserName); $("#PwdUpdate").val(rows[0].PassWord); $("#PersonNameUpdate").val(rows[0].PersonName); $("#divUpdateUser").dialog({ closed:false, title: "修改用戶", modal: true, width: 300, height: 300, collapsible: true, minimizable: true, maximizable: true, resizable: true, }); } } function searchFunc() { $("#datagrid").datagrid("load", sy.serializeObject($("#searchForm").form())); } //擴展方法 //點擊清空按鈕出發事件 function clearSearch() { $("#datagrid").datagrid("load", {}); //重新加載數據，無填寫數據，向后台傳遞值則為空 $("#searchForm").find("input").val(""); //找到form表單下的所有input標簽並清空 } //彈出 添加用戶的的對話框 function showCreateUserDialog() { $("#divAddUser").dialog({ closed:false, title: "添加用戶", modal: true, width: 300, height: 300, collapsible: true, minimizable: true, maximizable: true, resizable: true }); } //分配權限 function SetUserLimit() { var rows = $("#datagrid").datagrid("getSelections"); if (rows.length!=1) { $.messager.alert("提示","請選擇一條數據！"); return; } else { $("#UserRole").dialog({ closed:false, title: "設置用戶權限", modal: true, maximized:true, draggable:false }); //原始的分配權限 //$("#iframeSetUserRole").attr("src", "/houtai/Privilige/UserManage_Limit?userId=" + rows[0].ID); //TX: zTree分配權限 $("#iframeSetUserRole").attr("src", "/houtai/Privilige/ZTreeList?userId=" + rows[0].ID); } } //設置角色成功之后執行的方法 function afterSetRole() { $("#UserRole").dialog({ closed:true }); } //修改成功之后，由子容器來調用的方法 function afterUpdateSuccess() { //關閉對話框 $("#UserRole").dialog("close"); //刷新表格 initable(); } //添加用戶 function bindRegistButtonClickEvent() { $("#btnRegist").click(function () { var validate = $("#ff").form('validate'); if (validate == false) { return false; } var postData = { UName: $("#UName").val(), Pwd: $("#Pwd").val(), PersonName: $("#PersonName").val() }; //發送異步請求到后台保存用戶數據 $.post("/Privilige/AddUser", postData, function (data) { if (data == "Yes") { //添加成功 //關閉對話框，刷新表格 $.messager.alert("提示", "添加成功！"); $("#divAddUser").dialog("close"); initable(); } else if (data=="Exist") { $.messager.alert("提示", "該用戶名已經存在！"); return; } else if (data == "No") { $.messager.alert("提示", "用戶名或密碼不能為空！"); return; } }); }); } //------------------------系統管理-->用戶管理結束-----------------------------------------//
三、總結：
寫到這里吧，內容確實挺多的。如果對您有一些幫助的話，請您繼續關注這個系列的內容吧，下面的“推薦”，也可以讓更多的朋友來了解。