使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享

在上一篇文章《使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享》我们分享了使用Jquery EasyUI来进行开发的相关方法，同时对入群的用户提供了使用Jquery EasyUI开发的框架案例提供了测试地址进行在线测试，文章发表后得到了非常多的反馈，对后期版本的改进提供了很好的帮助，在此感谢！整个文章皆在说明如何使用进行管理类信息系统的开发，EasyUI也只是做个界面，业务核心都是调用的框架的核心接口。

通过上一篇文章，我们讲解了如何使用EasyUI中的tree、datagrid、linkbutton等常用UI组件、组件的特殊应用方法、数据加载技巧等等。

这一篇文章我们来分享一下使用EasyUI开发的用户管理模块的核心代码，用户管理模块主要是对可登录系统的用户进行管理。

后续的工作如：用户归属角色、权限的分配、用户所拥有的相应功能模块、各业务系统权限的分配等都是以此为基础。

用户管理的主要操作有：新增用户、修改用户、删除用户、设置用户的默认角色、设置用户密码、设置用户的有效性、用户排序等。

在用户管理主界面，有用户管理相应操作权限的登录用户可以添加、修改、删除（单个或批量删除）、设置密码、查询用户。

此模块一般分配给具有系统管理员角色的用户，以防误操作，超级管理员用户不允许被修改与删除。

当然，对于框架核心数据删除操作都是逻辑删除而非物理删除。

即删除是在相应记录上打上了删除标志。

若要恢复误删的数据，可以联系具有操作数据库的用户（如：DBA）进行数据恢复。

用户管理的主界面如下图所示：首先是用户管理的UI界面aspx代码如下：<%@ Page Language="C#"MasterPageFile="~/Site.Master" AutoEventWireup="true"CodeBehind="UserAdmin.aspx.cs"Inherits="erAdmin"%><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": <%=erInfo.Id %>, "name":'<%=erInfo.RealName %>', "username":'<%=erName %>' };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代码如下：1 $(function () {2grid.bind();3AddUser(); //添加用户4EditUser(); //编辑用户5DeleteUser(); //删除用户6SetUserPassword(); //设置用户密码7$('#a_refresh').click(function () {8$('#list').datagrid('reload');9});1011});1213/* 方法一绑定数据14var initList = function () {15var winSize = { width: $(window).width() - 4, height: $(window).height() - 40 };16$('#list').datagrid({17url: "handler/UserAdminHandler.ashx",18title: "系统用户列表",19iconCls: 'icon icon-list',20width: winSize.width,21height: winSize.height,22nowrap: false, //折行23rownumbers: true, //行号24striped: true, //隔行变色25idField: 'Id', //主键26singleSelect: true, //单选27checkOnSelect: true,28frozenColumns: [[]],29columns: [[30{ title: '主键', field: 'Id', hidden: true },31{ title: '编号', field: 'Code', width: 150 },32{ title: '登录名', field: 'UserName', width: 150, sortable: true }, 33{ title: '用户名', field: 'RealName', width: 150 },34{ title: '部门', field: 'DepartmentName', width: 150 },35{ title: '角色主键', field: 'RoleId', hidden: true },36{ title: '有效', field: 'Enabled', width: 50, formatter: imgcheckbox },37{ title: '邮箱地址', field: 'Email', width: 150 },38{ title: '手机号码', field: 'Mobile', width: 150 },39{ title: '描述', field: 'Description', width: 200 }40]]41});42}43*/4445var grid = {46bind: function () {47var winSize = { width: $(window).width() - 4, height: $(window).height() - 40 };48$('#list').datagrid({49url: "handler/UserAdminHandler.ashx",50title: "系统用户列表",51iconCls: 'icon icon-list',52width: winSize.width,53height: winSize.height,54nowrap: true, //false:折行55rownumbers: true, //行号56striped: true, //隔行变色57idField: 'Id', //主键58singleSelect: true, //单选59checkOnSelect: true,60//frozenColumns: [[]],61columns: [[62{ title: '主键', field: 'Id', hidden: true },63{ title: '编号', field: 'Code', width: 150 },64{ title: '登录名', field: 'UserName', width: 150, sortable: true },65{ title: '用户名', field: 'RealName', width: 150 },66{ title: '部门', field: 'DepartmentName', width: 150 }, 67{ title: '角色主键', field: 'RoleId', hidden: true },68{ title: '有效', field: 'Enabled', width: 50, formatter: imgcheckbox },69{ title: '邮箱地址', field: 'Email', width: 150 },70{ title: '手机号码', field: 'Mobile', width: 150 },71{ title: '描述', field: 'Description', width: 200 },72{ title: 'Enabled', field: 'Enabled', hidden: true },73{ title: 'Gender', field: 'Gender', hidden: true },74{ title: 'UserPassword', field: 'UserPassword', hidden: true },75{ title: 'Birthday', field: 'Birthday', formatter: date2str, hidden: true },76{ title: 'Telephone', field: 'Telephone', width: 200, hidden: true },77{ title: 'Duty', field: 'Duty', hidden: true },78{ title: 'QICQ', field: 'QICQ', hidden: true },79{ title: 'Title', field: 'Title', hidden: true },80{ title: 'RoleId', field: 'RoleId', hidden: true },81{ title: 'CompanyId', field: 'CompanyId', hidden: true }, 82{ title: 'CompanyName', field: 'CompanyName', hidden: true },83{ title: 'DepartmentId', field: 'DepartmentId', hidden: true },84{ title: 'DepartmentName', field: 'DepartmentName', hidden: true },85{ title: 'WorkgroupId', field: 'WorkgroupId', hidden: true },86{ title: 'WorkgroupName', field: 'WorkgroupName', hidden: true },87{ title: 'HomeAddress', field: 'HomeAddress', hidden: true }88]]89});90},91getSelectedRow: function () {92return $('#list').datagrid('getSelected');93}94}9596var imgcheckbox = function (cellvalue, options, rowObject) {97return cellvalue ? '<img src="/css/icon/ok.png" alt="正常" title="正常" />' : '<img src="/css/icon/stop.png" alt="禁用" title="禁用" />';98}99100var date2str = function (cellvalue, options, rowObject) {101if (cellvalue)102return $D(cellvalue).strftime("%Y-%m-%d");103else104return '';105}106107var initUIform = function () {108top.$('#w').hWindow({ html: pform, width: 640, height: 520, title: '添加用户', iconCls: 'icon-add', submit: function () {109var flag = true;110top.$('#uiform input').each(function () {111if ($(this).attr('required') || $(this).attr('validType')) {112if (!top.$(this).validatebox('isValid')) {113flag = false;114return;115}116}117});118119120var vRoleId = top.$('#txtRoleId').combobox('getValue');121var vCompanyId = top.$('#txtCompanyName').combobox('getValue'); 122var vDepartmentId =top.$('#txtDepartmentName').combobox('getValue');123var vWorkgroupId =top.$('#txtWorkgroupName').combobox('getValue');124var vCompanyName =top.$('#txtCompanyName').combobox('getText');125var vDepartmentName =top.$('#txtDepartmentName').combobox('getText');126var vWorkgroupName =top.$('#txtWorkgroupName').combobox('getText');127var queryString = top.$('#uiform').serialize() + '&action=add';128queryString = queryString + '&vRoleId=' + vRoleId +'&vCompanyId=' + vCompanyId + '&vDepartmentId=' + vDepartmentId +'&vWorkgroupId=' + vWorkgroupId;129queryString = queryString + '&vCompanyName=' + vCompanyName + '&vDepartmentName=' + vDepartmentName + '&vWorkgroupName=' + vWorkgroupName;130$.ajaxtext('handler/UserAdminHandler.ashx', queryString, function (msg) {131if (msg == "1") {132top.$('#notity').jnotifyAddMessage({ text: '添加成功.', permanent: false, type: 'message' });133top.$('#w').window('close');134$('#list').datagrid('reload');135}136else if (msg == "0") {137top.$('#notity').jnotifyAddMessage({ text: '用户名已存，请更换用户名.', permanent: false, type: 'warning' });138top.$('#txtUsername').select();139return false;140}141else {142alert(msg);143}144});145146return false;147}148});149150top.$('#uiform input').each(function () {151if ($(this).attr('required') || $(this).attr('validType'))152top.$(this).validatebox();153});154top.$('#txtBirthday').datebox();155}156 //添加用户157var AddUser = function () {158$('#a_add').click(function () {159if ($(this).linkbutton('options').disabled == true) {160return;161}162initUIform();163//绑定各数据字典164pubMethod.bindCategory('txtGender', 'Gender');165pubMethod.bindCategory('txtRoleId', 'null');166pubMethod.bindCategory('txtCompanyName', 'Company');167pubMethod.bindCategory('txtDepartmentName', 'Department');168pubMethod.bindCategory('txtWorkgroupName', 'Workgroup');169top.$('#chkEnabled').attr("checked", true);170top.$('#txtUserName').focus();171top.$('#txtDescription').val("");172});173}174 //修改用户175var EditUser = function () {176$('#a_edit').click(function () {177if ($(this).linkbutton('options').disabled == true) {178return;179}180181var selectRow = grid.getSelectedRow();182if (selectRow != null) {183184if (erName != '' && erName =='Administrator' && ername != 'Administrator') {185$.messager.alert('警告提示', '你不能修改超级管理员用户！', 'warning');186return false;187}188189//弹窗190top.$('#w').hWindow({ html: pform, width: 640, height: 520, title: '修改用户', iconCls: 'icon-edit', submit: function () {191var flag = true;192top.$('#uiform input').each(function () {193if ($(this).attr('required') || $(this).attr('validType')) { 194if (!top.$(this).validatebox('isValid')) {195flag = false;196return;197}198}199});200var vRoleId = top.$('#txtRoleId').combobox('getValue'); 201var vCompanyId =top.$('#txtCompanyName').combobox('getValue');202var vDepartmentId =top.$('#txtDepartmentName').combobox('getValue');203var vWorkgroupId =top.$('#txtWorkgroupName').combobox('getValue');204var vCompanyName =top.$('#txtCompanyName').combobox('getText');205var vDepartmentName =top.$('#txtDepartmentName').combobox('getText');206var vWorkgroupName =top.$('#txtWorkgroupName').combobox('getText');207208var queryString = top.$('#uiform').serialize() +'&action=edit&id=' + selectRow.Id;209queryString = queryString + '&vRoleId=' + vRoleId +'&vCompanyId=' + vCompanyId + '&vDepartmentId=' + vDepartmentId +'&vWorkgroupId=' + vWorkgroupId;210queryString = queryString + '&vCompanyName=' + vCompanyName + '&vDepartmentName=' + vDepartmentName +'&vWorkgroupName=' + vWorkgroupName;211$.ajaxtext('handler/UserAdminHandler.ashx', queryString, function (msg) {212if (msg == "1") {213top.$('#notity').jnotifyAddMessage({ text: '修改成功.', permanent: false, type: 'message' });214top.$('#w').window('close');215$('#list').datagrid('reload');216}217else218alert(msg);219});220221return false;222}223});224225top.$('#uiform input').each(function () {226if ($(this).attr('required') || $(this).attr('validType'))227top.$(this).validatebox();228});229//绑定各数据字典230pubMethod.bindCategory('txtGender', 'Gender');231pubMethod.bindCategory('txtRoleId', 'null');232pubMethod.bindCategory('txtCompanyName', 'Company');233pubMethod.bindCategory('txtDepartmentName', 'Department');234pubMethod.bindCategory('txtWorkgroupName', 'Workgroup'); 235236//初始化相关数据237top.$('#txtUserName').val(erName);238top.$('#txtRealName').val(selectRow.RealName);239top.$('#txtCode').val(selectRow.Code);240top.$('#txtUserPassword').after('******').remove();241top.$('#txtGender').combobox('setValue', selectRow.Gender); 242top.$('#txtMobile').val(selectRow.Mobile);243top.$('#txtBirthday').val(selectRow.Birthday);244top.$('#txtTelephone').val(selectRow.Telephone);245top.$('#txtDuty').val(selectRow.Duty);246top.$('#txtQICQ').val(selectRow.QICQ);247top.$('#txtTitle').val(selectRow.Title);248top.$('#txtEmail').val(selectRow.Email);249top.$('#txtRoleId').combobox('setValue', selectRow.RoleId); 250top.$('#txtCompanyName').combobox('setValue', panyId);251top.$('#txtDepartmentName').combobox('setValue', selectRow.DepartmentId);252top.$('#txtWorkgroupName').combobox('setValue', selectRow.WorkgroupId);253top.$('#txtHomeAddress').val(selectRow.HomeAddress);254top.$('#txtDescription').val(selectRow.Description);255top.$('#chkEnabled').attr("checked", selectRow.Enabled == "1"); 256} else {257top.$('#notity').jnotifyAddMessage({ text: '请选择要修改的用户.', permanent: false, type: 'warning' });258return false;259}260});261}262 //删除用户263var DeleteUser = function () {264$('#a_delete').click(function () {265if ($(this).linkbutton('options').disabled == true) {266return;267}268var selectRow = grid.getSelectedRow();269270if (selectRow) {271if (selectRow.Id != '' && selectRow.Id == curUserinfo.id) { 272$.messager.alert('警告提示', '不能删除当前登录用户！', 'warning');273return false;274}275276if(erName != '' && erName =='Administrator')277{278$.messager.alert('警告提示', '不能删除超级管理员用户！', 'warning');279return false;280}281282$.messager.confirm('询问提示', '确认要删除所选用户吗？', function (data) {283if (data) {284$.ajaxtext('handler/UserAdminHandler.ashx','action=delete&id=' + selectRow.Id, function (msg) {285if (msg == '1') {286$.messager.alert('成功提示', '所选用户删除成功！');287$('#list').datagrid('reload');288} else {289$.messager.alert('错误提示', msg, 'error'); 290}291});292}293});294}295else {296top.$('#notity').jnotifyAddMessage({ text: '请选择要删除的用户。