Using Jquery+EasyUI for Framework Project Development Case Explanation Part 2
User management source code sharing
In the previous article "One of the Cases of Using Jquery+EasyUI for Framework Project Development - Sharing of Employee Management Source Code", we shared the relevant methods of using Jquery EasyUI for development, and provided the use of Jquery EasyUI to the users who joined the group. The developed framework case provides a test address for online testing. After the article was published, it received a lot of feedback and provided great help for the improvement of the later version. Thank you! The whole article is explaining how to use RIDFramework.NET to develop management information systems. EasyUI is just an interface, and the core of the business is the core interface of the calling framework.
Through the previous article, we explained how to use common UI components such as tree, datagrid, and linkbutton in EasyUI, special application methods of components, data loading skills, and more.
In this article, let's share the core code of the user management module developed with EasyUI. The user management module mainly manages users who can log in to the system. The follow-up work, such as the user's attribution role, the distribution of permissions, the corresponding functional modules owned by the user, and the distribution of the permissions of each business system, are all based on this. The main operations of user management include: adding users, modifying users, deleting users, setting the default roles of users, setting user passwords, setting user validity, and user sorting. In the main interface of user management, the logged-in users with the corresponding operation authority of user management can add, modify, delete (single or batch delete), set password, and query users. This module is generally assigned to users with system administrator roles to prevent misoperation, and super administrator users are not allowed to be modified and deleted. Of course, the core data deletion operations for the framework are logical deletions rather than physical deletions. That is, to delete is to mark the delete mark on the corresponding record. If you want to restore accidentally deleted data, you can contact a user who operates the database (eg DBA) for data recovery. The main interface of user management is shown in the following figure:
The first is the user management UI interface aspx code as follows:
<%@ 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>
The code to bind the list of function buttons owned by the currently logged-in user is as follows:
/// <summary>
/// Get permission
/// </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>
/// Bind the page function button list
/// </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\"", "Set selected user password", "Set password"));
sb.Append("<div class='datagrid-btn-separator'></div> ");
sb.Append(string.Format(linkbtn_template, "export", "icon-user_go", permissionExport ? "" : "disabled=\"True\"", "导出用户数据", "导出"));
return sb.ToString();
}
The complete JS code of the core business logic is as follows:
$(function () {
grid.bind();
AddUser(); //Add user
EditUser(); //Edit user
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" style="width:470px;" 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 style="color:#666;padding-left:20px;">注：用户无效（禁用该用户）后，该用户将不能登录。</span></td></tr><tr><td align="right"> ';
pform += '描述：</td><td colspan =3><textarea id="txtDescription" name="Description" rows="3" style="width:470px;height:50px;" 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—系统目录
4、Jquery EasyUI本地实例文件（如果嫌官网速度过慢，可以下载这个看）
8、JavaScript权威指南（第六版）中文版（强烈推荐）在线观看
作者： EricHu 出处： http://blog.csdn.net/chinahuyong Email: 406590790@qq.com QQ 交流：406590790 ：16653241 平台博客： 【CSDN】http://blog.csdn.net/chinahuyong 【CNBLOGS】http://www.cnblogs.com/huyong 关于作者：高级工程师、信息系统项目管理师、DBA。专注于微软平台项目架构、管理和企业解决方案，多年项目开发与管理经验，曾多次组织并开发多个大型项目，精通DotNet，DB（SqlServer、Oracle等）技术。熟悉Java、Delhpi及Linux操作系统，有扎实的网络知识。在面向对象、面向服务以及数据库领域有一定的造诣。现从事DB管理与开发、WinForm、WCF、WebService、网页数据抓取以及ASP.NET等项目管理、开发、架构等工作。 如有问题或建议，请多多赐教！ 本文版权归作者和CSDN博客共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过邮箱或QQ 联系我，非常感谢。
