您好,登錄后才能下訂單哦!
使用Jquery+EasyUI 進行框架項目開發案例講解之二
用戶管理源碼分享
在上一篇文章《使用Jquery+EasyUI進行框架項目開發案例講解之一---員工管理源碼分享》我們分享了使用Jquery EasyUI來進行開發的相關方法,同時對入群的用戶提供了使用Jquery EasyUI開發的框架案例提供了測試地址進行在線測試,文章發表后得到了非常多的反饋,對后期版本的改進提供了很好的幫助,在此感謝!整個文章皆在說明如何使用RIDFramework.NET進行管理類信息系統的開發,EasyUI也只是做個界面,業務核心都是調用的框架的核心接口。
通過上一篇文章,我們講解了如何使用EasyUI中的tree、datagrid、linkbutton等常用UI組件、組件的特殊應用方法、數據加載技巧等等。
這一篇文章我們來分享一下使用EasyUI開發的用戶管理模塊的核心代碼,用戶管理模塊主要是對可登錄系統的用戶進行管理。后續的工作如:用戶歸屬角色、權限的分配、用戶所擁有的相應功能模塊、各業務系統權限的分配等都是以此為基礎。用戶管理的主要操作有:新增用戶、修改用戶、刪除用戶、設置用戶的默認角色、設置用戶密碼、設置用戶的有效性、用戶排序等。在用戶管理主界面,有用戶管理相應操作權限的登錄用戶可以添加、修改、刪除(單個或批量刪除)、設置密碼、查詢用戶。此模塊一般分配給具有系統管理員角色的用戶,以防誤操作,超級管理員用戶不允許被修改與刪除。當然,對于框架核心數據刪除操作都是邏輯刪除而非物理刪除。即刪除是在相應記錄上打上了刪除標志。若要恢復誤刪的數據,可以聯系具有操作數據庫的用戶(如:DBA)進行數據恢復。用戶管理的主界面如下圖所示:
首先是用戶管理的UI界面aspx代碼如下:
<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"CodeBehind="UserAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.UserAdmin" %> <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server"> <script src="../Scripts/jquery-checkbox.js" type="text/javascript"></script> <script src="../Scripts/date.js" type="text/javascript"></script> <script src="../Scripts/jquery-checkbox.js" type="text/javascript"></script> <script src="../Scripts/jQuery.Select.js" type="text/javascript"></script> <script src="../Scripts/jquery.easyListSplitter.js" type="text/javascript"></script> <script src="../Scripts/Business/UserAdmin.js" type="text/javascript"></script> <script src="../Scripts/easyui/plugins/jquery.linkbutton.js" type="text/javascript" /> </asp:Content> <asp:Content ID="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1"> <div class="toolbar"><%=base.BuildToolBarButtons() %></div> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <div id="w"></div> <div id="d"></div> <script type="text/javascript"> var curUserinfo = { "id": <%=base.UserInfo.Id %>, "name": '<%=base.UserInfo.RealName %>', "username": '<%=base.UserInfo.UserName %>' }; var varPermission = { "varPermissionAdd": '<%=permissionAdd %>', "varPermissionEdit": '<%=permissionEdit %>', "varPermissionDelete": '<%=permissionDelete %>' }; $(function () { $('#a1').linkbutton('disable'); }); </script> </asp:Content>
綁定當前登錄用戶所擁有的功能按鈕列表代碼如下:
/// <summary> /// 獲得權限 /// </summary> private void GetPermission() { this.permissionAdd = this.IsAuthorized("UserManagement.Add"); this.permissionEdit = this.IsAuthorized("UserManagement.Edit"); this.permissionSetPassword = this.IsAuthorized("UserManagement.SetUserPassword"); this.permissionDelete = this.IsAuthorized("UserManagement.Delete"); } /// <summary> /// 綁定頁面功能按鈕列表 /// </summary> public override string BuildToolBarButtons() { StringBuilder sb = new StringBuilder(); string linkbtn_template = "<a id=\"a_{0}\" class=\"easyui-linkbutton\" style=\"float:left\" plain=\"true\" href=\"javascript:;\" icon=\"{1}\" {2} title=\"{3}\">{4}</a>"; sb.Append("<a id=\"a_refresh\" class=\"easyui-linkbutton\" style=\"float:left\" plain=\"true\" href=\"javascript:;\" icon=\"icon-reload\" title=\"重新加載\">刷新</a> "); sb.Append("<div class='datagrid-btn-separator'></div> "); sb.Append(string.Format(linkbtn_template, "add", "icon-user_add", permissionAdd ? "" : "disabled=\"True\"", "添加用戶", "添加")); sb.Append(string.Format(linkbtn_template, "edit", "icon-user_edit", permissionEdit ? "" : "disabled=\"True\"", "修改用戶", "修改")); sb.Append(string.Format(linkbtn_template, "delete", "icon-user_delete", permissionDelete ? "" : "disabled=\"True\"", "刪除用戶", "刪除")); sb.Append("<div class='datagrid-btn-separator'></div> "); sb.Append(string.Format(linkbtn_template, "editpassword", "icon-user_key", permissionSetPassword ? "" : "disabled=\"True\"", "設置選中用戶密碼", "設置密碼")); sb.Append("<div class='datagrid-btn-separator'></div> "); sb.Append(string.Format(linkbtn_template, "export", "icon-user_go", permissionExport ? "" : "disabled=\"True\"", "導出用戶數據", "導出")); return sb.ToString(); }
核心業務邏輯完整JS代碼如下:
$(function () { grid.bind(); AddUser(); //添加用戶 EditUser(); //編輯用戶 DeleteUser(); //刪除用戶 SetUserPassword(); //設置用戶密碼 $('#a_refresh').click(function () { $('#list').datagrid('reload'); }); }); /* 方法一綁定數據 var initList = function () { var winSize = { width: $(window).width() - 4, height: $(window).height() - 40 }; $('#list').datagrid({ url: "handler/UserAdminHandler.ashx", title: "系統用戶列表", iconCls: 'icon icon-list', width: winSize.width, height: winSize.height, nowrap: false, //折行 rownumbers: true, //行號 striped: true, //隔行變色 idField: 'Id', //主鍵 singleSelect: true, //單選 checkOnSelect: true, frozenColumns: [[]], columns: [[ { title: '主鍵', field: 'Id', hidden: true }, { title: '編號', field: 'Code', width: 150 }, { title: '登錄名', field: 'UserName', width: 150, sortable: true }, { title: '用戶名', field: 'RealName', width: 150 }, { title: '部門', field: 'DepartmentName', width: 150 }, { title: '角色主鍵', field: 'RoleId', hidden: true }, { title: '有效', field: 'Enabled', width: 50, formatter: imgcheckbox }, { title: '郵箱地址', field: 'Email', width: 150 }, { title: '手機號碼', field: 'Mobile', width: 150 }, { title: '描述', field: 'Description', width: 200 } ]] }); } */ var grid = { bind: function () { var winSize = { width: $(window).width() - 4, height: $(window).height() - 40 }; $('#list').datagrid({ url: "handler/UserAdminHandler.ashx", title: "系統用戶列表", iconCls: 'icon icon-list', width: winSize.width, height: winSize.height, nowrap: true, //false:折行 rownumbers: true, //行號 striped: true, //隔行變色 idField: 'Id', //主鍵 singleSelect: true, //單選 checkOnSelect: true, //frozenColumns: [[]], columns: [[ { title: '主鍵', field: 'Id', hidden: true }, { title: '編號', field: 'Code', width: 150 }, { title: '登錄名', field: 'UserName', width: 150, sortable: true }, { title: '用戶名', field: 'RealName', width: 150 }, { title: '部門', field: 'DepartmentName', width: 150 }, { title: '角色主鍵', field: 'RoleId', hidden: true }, { title: '有效', field: 'Enabled', width: 50, formatter: imgcheckbox }, { title: '郵箱地址', field: 'Email', width: 150 }, { title: '手機號碼', field: 'Mobile', width: 150 }, { title: '描述', field: 'Description', width: 200 }, { title: 'Enabled', field: 'Enabled', hidden: true }, { title: 'Gender', field: 'Gender', hidden: true }, { title: 'UserPassword', field: 'UserPassword', hidden: true }, { title: 'Birthday', field: 'Birthday', formatter: date2str, hidden: true }, { title: 'Telephone', field: 'Telephone', width: 200, hidden: true }, { title: 'Duty', field: 'Duty', hidden: true }, { title: 'QICQ', field: 'QICQ', hidden: true }, { title: 'Title', field: 'Title', hidden: true }, { title: 'RoleId', field: 'RoleId', hidden: true }, { title: 'CompanyId', field: 'CompanyId', hidden: true }, { title: 'CompanyName', field: 'CompanyName', hidden: true }, { title: 'DepartmentId', field: 'DepartmentId', hidden: true }, { title: 'DepartmentName', field: 'DepartmentName', hidden: true }, { title: 'WorkgroupId', field: 'WorkgroupId', hidden: true }, { title: 'WorkgroupName', field: 'WorkgroupName', hidden: true }, { title: 'HomeAddress', field: 'HomeAddress', hidden: true } ]] }); }, getSelectedRow: function () { return $('#list').datagrid('getSelected'); } } var imgcheckbox = function (cellvalue, options, rowObject) { return cellvalue ? '<img src="/css/icon/ok.png" alt="正常" title="正常" />' : '<img src="/css/icon/stop.png" alt="禁用" title="禁用" />'; } var date2str = function (cellvalue, options, rowObject) { if (cellvalue) return $D(cellvalue).strftime("%Y-%m-%d"); else return ''; } var initUIform = function () { top.$('#w').hWindow({ html: pform, width: 640, height: 520, title: '添加用戶', iconCls: 'icon-add', submit: function () { var flag = true; top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) { if (!top.$(this).validatebox('isValid')) { flag = false; return; } } }); var vRoleId = top.$('#txtRoleId').combobox('getValue'); var vCompanyId = top.$('#txtCompanyName').combobox('getValue'); var vDepartmentId = top.$('#txtDepartmentName').combobox('getValue'); var vWorkgroupId = top.$('#txtWorkgroupName').combobox('getValue'); var vCompanyName = top.$('#txtCompanyName').combobox('getText'); var vDepartmentName = top.$('#txtDepartmentName').combobox('getText'); var vWorkgroupName = top.$('#txtWorkgroupName').combobox('getText'); var queryString = top.$('#uiform').serialize() + '&action=add'; queryString = queryString + '&vRoleId=' + vRoleId + '&vCompanyId=' + vCompanyId + '&vDepartmentId=' + vDepartmentId + '&vWorkgroupId=' + vWorkgroupId; queryString = queryString + '&vCompanyName=' + vCompanyName + '&vDepartmentName=' + vDepartmentName + '&vWorkgroupName=' + vWorkgroupName; $.ajaxtext('handler/UserAdminHandler.ashx', queryString, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '添加成功.', permanent: false, type: 'message' }); top.$('#w').window('close'); $('#list').datagrid('reload'); } else if (msg == "0") { top.$('#notity').jnotifyAddMessage({ text: '用戶名已存,請更換用戶名.', permanent: false, type: 'warning' }); top.$('#txtUsername').select(); return false; } else { alert(msg); } }); return false; } }); top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) top.$(this).validatebox(); }); top.$('#txtBirthday').datebox(); } //添加用戶 var AddUser = function () { $('#a_add').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } initUIform(); //綁定各數據字典 pubMethod.bindCategory('txtGender', 'Gender'); pubMethod.bindCategory('txtRoleId', 'null'); pubMethod.bindCategory('txtCompanyName', 'Company'); pubMethod.bindCategory('txtDepartmentName', 'Department'); pubMethod.bindCategory('txtWorkgroupName', 'Workgroup'); top.$('#chkEnabled').attr("checked", true); top.$('#txtUserName').focus(); top.$('#txtDescription').val(""); }); } //修改用戶 var EditUser = function () { $('#a_edit').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } var selectRow = grid.getSelectedRow(); if (selectRow != null) { if (selectRow.UserName != '' && selectRow.UserName == 'Administrator' && curUserinfo.username != 'Administrator') { $.messager.alert('警告提示', '你不能修改超級管理員用戶!', 'warning'); return false; } //彈窗 top.$('#w').hWindow({ html: pform, width: 640, height: 520, title: '修改用戶', iconCls: 'icon-edit', submit: function () { var flag = true; top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) { if (!top.$(this).validatebox('isValid')) { flag = false; return; } } }); var vRoleId = top.$('#txtRoleId').combobox('getValue'); var vCompanyId = top.$('#txtCompanyName').combobox('getValue'); var vDepartmentId = top.$('#txtDepartmentName').combobox('getValue'); var vWorkgroupId = top.$('#txtWorkgroupName').combobox('getValue'); var vCompanyName = top.$('#txtCompanyName').combobox('getText'); var vDepartmentName = top.$('#txtDepartmentName').combobox('getText'); var vWorkgroupName = top.$('#txtWorkgroupName').combobox('getText'); var queryString = top.$('#uiform').serialize() + '&action=edit&id=' + selectRow.Id; queryString = queryString + '&vRoleId=' + vRoleId + '&vCompanyId=' + vCompanyId + '&vDepartmentId=' + vDepartmentId + '&vWorkgroupId=' + vWorkgroupId; queryString = queryString + '&vCompanyName=' + vCompanyName + '&vDepartmentName=' + vDepartmentName + '&vWorkgroupName=' + vWorkgroupName; $.ajaxtext('handler/UserAdminHandler.ashx', queryString, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '修改成功.', permanent: false, type: 'message' }); top.$('#w').window('close'); $('#list').datagrid('reload'); } else alert(msg); }); return false; } }); top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) top.$(this).validatebox(); }); //綁定各數據字典 pubMethod.bindCategory('txtGender', 'Gender'); pubMethod.bindCategory('txtRoleId', 'null'); pubMethod.bindCategory('txtCompanyName', 'Company'); pubMethod.bindCategory('txtDepartmentName', 'Department'); pubMethod.bindCategory('txtWorkgroupName', 'Workgroup'); //初始化相關數據 top.$('#txtUserName').val(selectRow.UserName); top.$('#txtRealName').val(selectRow.RealName); top.$('#txtCode').val(selectRow.Code); top.$('#txtUserPassword').after('******').remove(); top.$('#txtGender').combobox('setValue', selectRow.Gender); top.$('#txtMobile').val(selectRow.Mobile); top.$('#txtBirthday').val(selectRow.Birthday); top.$('#txtTelephone').val(selectRow.Telephone); top.$('#txtDuty').val(selectRow.Duty); top.$('#txtQICQ').val(selectRow.QICQ); top.$('#txtTitle').val(selectRow.Title); top.$('#txtEmail').val(selectRow.Email); top.$('#txtRoleId').combobox('setValue', selectRow.RoleId); top.$('#txtCompanyName').combobox('setValue', selectRow.CompanyId); top.$('#txtDepartmentName').combobox('setValue', selectRow.DepartmentId); top.$('#txtWorkgroupName').combobox('setValue', selectRow.WorkgroupId); top.$('#txtHomeAddress').val(selectRow.HomeAddress); top.$('#txtDescription').val(selectRow.Description); top.$('#chkEnabled').attr("checked", selectRow.Enabled == "1"); } else { top.$('#notity').jnotifyAddMessage({ text: '請選擇要修改的用戶.', permanent: false, type: 'warning' }); return false; } }); } //刪除用戶 var DeleteUser = function () { $('#a_delete').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } var selectRow = grid.getSelectedRow(); if (selectRow) { if (selectRow.Id != '' && selectRow.Id == curUserinfo.id) { $.messager.alert('警告提示', '不能刪除當前登錄用戶!', 'warning'); return false; } if(selectRow.UserName != '' && selectRow.UserName == 'Administrator') { $.messager.alert('警告提示', '不能刪除超級管理員用戶!', 'warning'); return false; } $.messager.confirm('詢問提示', '確認要刪除所選用戶嗎?', function (data) { if (data) { $.ajaxtext('handler/UserAdminHandler.ashx', 'action=delete&id=' + selectRow.Id, function (msg) { if (msg == '1') { $.messager.alert('成功提示', '所選用戶刪除成功!'); $('#list').datagrid('reload'); } else { $.messager.alert('錯誤提示', msg, 'error'); } }); } }); } else { top.$('#notity').jnotifyAddMessage({ text: '請選擇要刪除的用戶。', permanent: false, type: 'warning' }); return; } }); } //設置用戶密碼 var SetUserPassword = function () { $('#a_editpassword').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } var selectRow = grid.getSelectedRow(); if (selectRow != null) { top.$('#d').hDialog({ width: 300, height: 160, title: '設置用戶密碼', iconCls: 'icon-key', html: formeditpass, submit: function () { if (top.$('#txtNewPassword').validatebox('isValid')) { $.ajaxtext('handler/UserAdminHandler.ashx', "action=setpassword&id=" + selectRow.Id + '&password=' + top.$('#txtNewPassword').val(), function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '密碼修改成功!請牢記新密碼。', permanent: false, type: 'warning' }); top.$('#d').dialog('close'); } else alert(msg); }) } } }); top.$('#loginname').text(selectRow.UserName + ' | ' + selectRow.RealName); top.$('#txtNewPassword').validatebox(); } else { top.$('#notity').jnotifyAddMessage({ text: '請選擇要修改密碼的用戶。', permanent: false, type: 'warning' }); return false; } }); } //公共方法 var pubMethod = { bindCategory: function (categoryControl, categoryCode) { if (categoryControl == '' || categoryCode == '') { return; } if (categoryControl == 'txtGender') { top.$('#' + categoryControl).combobox({ url: 'Modules/handler/DataItemAdminHandler.ashx?action=GetCategory&categorycode=' + categoryCode, method: 'get', valueField: 'ItemValue', textField: 'ItemName', editable: false, panelHeight: 'auto' }); } if (categoryControl == 'txtRoleId') { top.$('#' + categoryControl).combobox({ url: 'Modules/handler/RoleAdminHandler.ashx?action=GetEnabledRoleList', method: 'get', valueField: 'Id', textField: 'RealName', editable: false, panelHeight: 'auto' }); } if (categoryControl == 'txtCompanyName' || categoryControl == 'txtDepartmentName' || categoryControl == 'txtWorkgroupName') { top.$('#' + categoryControl).combobox({ url: 'Modules/handler/OrganizeAdminHander.ashx?action=GetOrganizeByCategory&OrganizeCategory=' + categoryCode, method: 'get', valueField: 'Id', textField: 'FullName', editable: false, panelHeight: 'auto' }); } } } var pform = '<form id="uiform"><table cellpadding=5 cellspacing=0 width=100% align="center" class="grid2" border=0><tr><td align="right">'; pform += '登錄用戶名:</td><td><input name="UserName" id="txtUserName" validType="length[2,40]" required="true" type="text" class="txt03" ></td><td align="right">'; pform += '姓名:</td><td><input name="RealName" id="txtRealName" validType="length[2,40]" required="true" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '編號:</td><td><input name="Code" id="txtCode" validType="length[2,40]" type="text" class="txt03" ></td><td align="right">'; pform += '用戶密碼:</td><td><input validType="safepass" required="true" name="UserPassword" id="txtUserPassword" type="password" class="txt03" ></td></tr><tr><td align="right">'; pform += '性別:</td><td><input name="Gender" id="txtGender" required="true" type="text" class="txt03" ></td><td align="right">'; pform += '手機號碼:</td><td><input name="Mobile" id="txtMobile" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '出生日期:</td><td><input name="Birthday" id="txtBirthday" type="text" class="txt03" ></td><td align="right">'; pform += '固定電話:</td><td><input name="Telephone" id="txtTelephone" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '崗位:</td><td><input name="Duty" id="txtDuty" type="text" class="txt03" ></td><td align="right">'; pform += 'QQ號碼:</td><td><input name="QICQ" id="txtQICQ" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '職稱:</td><td><input name="Title" id="txtTitle" type="text" class="txt03" ></td><td align="right">'; pform += '郵箱地址:</td><td><input name="Email" id="txtEmail" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '默認角色:</td><td><input name="RoleId" id="txtRoleId" type="text" class="txt03" ></td><td align="right">'; pform += '公司名稱:</td><td><input name="CompanyName" id="txtCompanyName" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '部門名稱:</td><td><input name="DepartmentName" id="txtDepartmentName" type="text" class="txt03" ></td><td align="right">'; pform += '工作組:</td><td><input name="WorkgroupName" id="txtWorkgroupName" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '家庭地址:</td><td colspan="3"><input name="HomeAddress" id="txtHomeAddress" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '有效性:</td><td colspan="3"><input id="chkEnabled" type="checkbox" name="Enabled" /><label>有效</label> <span >注:用戶無效(禁用該用戶)后,該用戶將不能登錄。</span></td></tr><tr><td align="right"> '; pform += '描述:</td><td colspan =3><textarea id="txtDescription" name="Description" rows="3" class="txt03"></td></tr></table></form>'; var formeditpass = '<table class="grid" id="epform">'; formeditpass += '<tr><td>登錄名:</td><td><span id="loginname"></span></td></tr>'; formeditpass += '<tr><td>新密碼:</td><td><input validType="safepass" required="true" id="txtNewPassword" name="password" type="password" class="txt03" /></td></tr>'; formeditpass += '</table>';
添加用戶界面如下:
修改用戶界面如下:
設置用戶密碼:
用戶管理一般處理程序:
相關資源分享
1、基于.NET的快速信息化系統開發整合框架 —RDIFramework.NET—系統目錄
2、Jquery EasyUI官方網站
3、Jquery學習官方網站
4、Jquery EasyUI本地實例文件(如果嫌官網速度過慢,可以下載這個看)
5、Jquery權威指南下載
6、Jquery權威指南源代碼下載
7、Jquery EasyUI 1.3中文.chm文件下載
8、JavaScript權威指南(第六版)中文版(強烈推薦)在線觀看
作者: EricHu 出處: http://www.cnblogs.com/huyong 微博: 騰訊 Email: 406590790@qq.com QQ 交流:406590790
QQ 群:237326100 平臺博客: 【CSDN】http://blog.csdn.net/chinahuyong 【CNBLOGS】http://www.cnblogs.com/huyong 關于作者:高級工程師、信息系統項目管理師、DBA。專注于微軟平臺項目架構、管理和企業解決方案,多年項目開發與管理經驗,曾多次組織并開發多個大型項目,精通DotNet,DB(SqlServer、Oracle等)技術。熟悉Java、Delhpi及Linux操作系統,有扎實的網絡知識。在面向對象、面向服務以及數據庫領域有一定的造詣。 如有問題或建議,請多多賜教! 本文版權歸作者和CNBLOGS博客共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,如有問題,可以通過郵箱或QQ 聯系我,非常感謝。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。