基于easyUI实现权限管理系统（四）——用户管理
此文章是基于 EasyUI+Knockout实现经典表单的查看、编辑
一. 相关文件介绍
1. user.jsp：用户管理界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<%@ include file="/common/head.jsp"%>
<style type="text/css">
div#navigation{background:white}
div#wrapper{float:right;width:100%;margin-left:-185px}
div#content{margin-left:185px}
div#navigation{float:left;width:180px}
.datagrid-cell a{color:black;}
.datagrid-cell a:hover{color:red;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="content">
<div class="toolbar">
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" data-bind="click:editClick" title="编辑">编辑</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-save" data-bind="click:saveClick" title="保存">保存</a>
<a href="#" plain="true" class="easyui-linkbutton" icon="icon-key" data-bind="click:passwordClick" title="重置密码">重置密码</a>
</div> <table id="gridlist" data-bind="datagrid:grid">
<thead>
<tr>
<th field="id" hidden="true"></th>
<th field="userCode" sortable="true" align="left" width="70" editor="{type:'validatebox',options:{required:true}}" >用户编码 </th>
<th field="userName" sortable="true" align="left" width="80" editor="{type:'validatebox',options:{required:true}}" >用户名称 </th>
<th field="emailAddr" sortable="true" align="left" width="80" editor="{type:'validatebox',options:{required:true}}" >邮箱地址 </th>
<th field="phoneNum" sortable="true" align="left" width="80" editor="{type:'validatebox',options:{required:true}}" >联系号码 </th>
<th field="description" sortable="true" align="left" width="180" editor="text" >描述说明 </th>
<th field="isEnable" sortable="true" align="center" width="70" formatter="com.formatCheckbox" editor="{type:'checkbox',options:{on:1,off:0}}">是否启用 </th>
<th field="loginCount" sortable="true" align="right" width="60" >登陆次数 </th>
<th field="lastLoginDate" sortable="true" align="center" width="120" formatter="com.formatTime" >最后登陆时间 </th>
<th field="permit" align="center" width="270" formatter="formatterButton"> 操作 </th>
</tr>
</thead>
</table>
</div>
</div> <div id="navigation">
<div title="组织机构" style="width: 180px;" class="easyui-panel" data-options="title: '组织机构', iconCls: 'icon-org', height: $(window).height() - 4 ">
<ul data-bind="easyuiTree:tree"></ul>
</div>
</div>
</div> <script type="text/html" id="setorganize-template">
<div style="margin:5px;">
<div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
<span id="role_name" class="icon32 icon-user-edit32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:userName">刘会胜</span>
</div>
<div> 所属机构：</div>
<div class="listview" style="height:315px;overflow:auto;"></div>
</div>
<div style="text-align:center;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)" >确定</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>
</div>
</script> <script type="text/html" id="setrole-template">
<style type="text/css">
.listview{ margin:0 !important;}
.listview li{width:100px !important;background-color:skyblue !important;float:left;margin:3px;}
</style>
<div style="margin:5px;height:370px;overflow:auto;" >
<div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
<span class="icon32 icon-user-edit32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:userName">刘会胜</span>
</div>
<div> 拥有角色(请点击勾选)：</div>
<div class="metrouicss">
<ul class="listview"></ul>
</div>
</div>
<div style="text-align:center;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)" >确定</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>
</div>
</script> <%@ include file="/common/foot.jsp"%>
<script src="viewModel/sys/user.js"></script>
<script src="viewModel/sys/organizeTreeGraph.js"></script>
<script type="text/javascript">
using(['validatebox','messager','dialog']);
ko.bindingViewModel(new viewModel());
var formatterButton = function (value, row) {
var dataStr = JSON.stringify({id:row.id,userName:row.userName,_isnew:row._isnew});
var html = '<a href="javascript:;" onclick=\'setOrganize(' + dataStr + ')\'><span class="icon icon-org"> </span>[设置机构]</a>';
html += '<a href="javascript:;" onclick=\'setRole(' + dataStr + ')\' style="margin-left:10px"><span class="icon icon-group"> </span>[设置角色]</a>';
return html;
};
</script>
</body>
</html>
2. user.js：实现用户管理功能、列表，设置机构、设置角色功能
function viewModel() {
var self = this;
this.refreshClick=function(){
window.location.reload();
};
this.addClick=function(){
self.gridEdit.addnew({});
};
this.editClick=function(){
var row = self.grid.datagrid('getSelected');
var index = self.grid.datagrid('getRowIndex',row);
self.gridEdit.begin(index,row);
};
this.deleteClick=function(){
self.gridEdit.deleterow();
};
this.saveClick = function () {
self.gridEdit.ended();
var post = {};
post.list = self.gridEdit.getChanges(['id', 'userCode', 'userName', 'emailAddr', 'phoneNum', 'materialCode', 'description', 'isEnable']);
if (self.gridEdit.ended() && post.list._changed) {
com.ajax({
url: rootPath+'/sys/user!edit.do',
data: ko.toJSON(post),
success: function (d) {
com.message('success', '保存成功！');
self.gridEdit.accept();
}
});
}
};
this.passwordClick = function () {
var row = self.grid.datagrid('getSelected');
if (!row) return com.message('warning', '请先选择一个用户！');
com.message('confirm', '确定要把选中用户的密码重置为<span style="color:red">用户名</span>吗？', function (b) {
if (b) {
com.ajax({
type: 'POST',
url: rootPath+'/sys/user!postResetPassword.do?userId=' + row.id,
success: function () {
com.message('success', '密码已重置成功！');
}
});
}
});
};
this.grid = {
size: { w: 189, h: 40 },
url: rootPath+'/sys/user!list.do',
queryParams: ko.observable(),
pagination: true,
customLoad: false
};
this.gridEdit = new com.editGridViewModel(this.grid);
this.grid.onDblClickRow = self.gridEdit.begin;
this.grid.onClickRow = self.gridEdit.ended;
this.grid.OnAfterCreateEditor =function(editors,row){
if (row._isnew == undefined )
com.readOnlyHandler('input')(editors.userCode.target,true);
};
this.tree = {
method:'GET',
url:rootPath+'/sys/organize!get.do',
loadFilter:function(d){
var filter = utils.filterProperties(d,['id','organizeName as text','parentId as pid']);
return utils.toTreeData(filter,'id','pid','children');
},
onSelect:function(node){
self.grid.queryParams({organizeId:node.id});
}
};
}
var setOrganize = function (row) {
if (row._isnew)
return com.message('warning', '请先保存再设置机构！');
com.dialog({
title: "设置机构",
width: 600,
height: 450,
html:"#setorganize-template",
viewModel:function(w){
var that = this;
this.userName = ko.observable(row.userName);
this.graph = ko.observable();
com.ajax({
type: 'GET',
url: rootPath+'/sys/organize!getOrganizeWithUserCheck.do?userId=' + row.id,
success: function (d) {
var ul = w.find(".listview");
var treeData = utils.toTreeData(d, "id", "parentId", "children");
var tb = renderTreeGraph(treeData)[0].outerHTML;
ul.append(tb);
ul.find(".td-node").each(function () {
var checked = $(this).data("node").checked;
$(this).prepend(com.formatCheckbox(checked)).css({ "background-color": "#f6f6ff", "color": checked=='0' ? "" : "#FF0000" });
}).click(function () {
var $this = $(this), checked = $this.find("img").attr("value");
var img2 = $(com.formatCheckbox(checked=='true'?'0':'1'));
$this.find("img").attr("src", img2.attr("src")).attr("value", img2.attr("value"));
$this.css({ "background-color": "#f6f6ff", "color": checked=='true' ? "" : "#FF0000" });
});
}
});
this.confirmClick = function () {
var organizes = [];
w.find("img[value=true]").each(function () {
organizes.push({organizeId:$(this).parent().data("node").id});
});
com.ajax({
url: rootPath+'/sys/user!editUserOrganizes.do?userId=' + row.id,
data: ko.toJSON(organizes),
success: function (d) {
that.cancelClick();
com.message('success', '保存成功！');
}
});
};
this.cancelClick = function () {
w.dialog('close');
};
}
});
};
var setRole = function (row) {
if (row._isnew)
return com.message('warning', '请先保存再设置角色！');
com.dialog({
title: "设置角色",
width: 600,
height: 450,
html: "#setrole-template",
viewModel: function (w) {
var thisRole = this;
this.userName = ko.observable(row.userName);
com.loadCss(rootPath+'/content/css/metro/css/modern.css', parent.document);
com.ajax({
type: 'GET',
url: rootPath+'/sys/role!getRoleWithUserCheck.do?userId=' + row.id,
success: function (d) {
var ul = w.find(".listview");
for (var i in d)
ul.append(utils.formatString('<li role="{0}" class="{2}">{1}</li>',d[i].id,d[i].roleName,d[i].checked=='1'?'selected':''));
ul.find("li").click(function () {
if ($(this).hasClass('selected'))
$(this).removeClass('selected');
else
$(this).addClass('selected');
});
}
});
this.confirmClick = function () {
var roles = [];
w.find("li.selected").each(function () {
roles.push({ roleId: $(this).attr('role') });
});
com.ajax({
url: rootPath+'/sys/user!editUserRoles.do?userId=' + row.id,
data: ko.toJSON(roles),
success: function (d) {
thisRole.cancelClick();
com.message('success', '保存成功！');
}
});
};
this.cancelClick = function () {
w.dialog('close');
};
}
});
};
二. 效果图
1. 访问：http://localhost:8080/ims/sys/user.do，用户管理界面
2. 点击 设置机构
3. 点击 设置角色
基于easyUI实现权限管理系统（四）——用户管理的更多相关文章
- 基于easyUI实现权限管理系统（三）——角色管理
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. role.jsp:角色管理界面 <!DOCTYPE html PUBLIC "-//W3 ...
- 基于easyUI实现权限管理系统（二）——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. menu.jsp:菜单导航主界面 <!DOCTYPE html PUBLIC "-//W ...
- 基于easyUI实现权限管理系统（一）一—组织结构树图形
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. organize.jsp:组织结构树的主界面 <!DOCTYPE html PUBLIC &quo ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（27）-权限管理系统-分配用户给角色
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(27)-权限管理系统-分配用户给角色 分配用户给角色,跟分配角色给用户操作是基本一致的. 打开模块维护,展 ...
- [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理
原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...
- 项目：rbac 基于角色的权限管理系统；
- 简单示意流程图 - RBAC分析: - 基于角色的权限管理: - 权限等于用户可以访问的URL: - 通过限制URL来限制权限: - RBAC表结构组成: from django.db impor ...
- 基于操作系统原理的Linux 的用户管理
一.实验目的 1．掌握为root用户修改密码的方法. 2．掌握创建新用户的方法. 3．掌握用户组的管理方法. 4．掌握为用户授权的方法. 二.实验内容 1．Linux的用户管理 (1)创建新用户创建新 ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
随机推荐
- HDU6333-2018ACM暑假多校联合训练1002-Harvest of Apples-莫队+费马小定理
题意很简单啦,求S(n,m)的值 通过打表我们可以知道 S(n + 1, m) = S(n, m) * 2 - C(n, m); S(n - 1, m) = (S(n, m) + C(n - 1, m ...
- [Java] 编写第一个java程序
1)先不用myEclipse编写,用txt编写,新建Test.txt:修改扩展名变为Test.java; 2)编辑,手写输入代码,保存(以保存在E盘下为例): public class Test{ p ...
- ArchLinux借助Winetricks-zh安裝WineQQ8.1
Wine是一个在x86.x86-64上容许类Unix操作系统在X Window System下运行Microsoft Windows程序的软件.Wine有另一个非官方名称,"Windows ...
- maven项目报错
[root@kube-master iff]# kubectl logs iff-dm-3029278244-9qrp6 -n iffjava.lang.IllegalArgumentExceptio ...
- ModuleNotFoundError: No module named 'Crypto'
pycrypto已经舍弃了使用pycryptodome,pip uninstall pycrypto,然后安装pycryptodome,pip install pycryptodome 可能还需要改名 ...
- rinetd做代理！redis做代理使外网直接远程连接
Centos7下Rinetd安装与应用 Linux下做地址NAT有很多种方法.比如haproxy.nginx的4层代理,linux自带的iptables等都能实现.haproxy.nginx就不说 ...
- tomcat Setting property 'source' to 'org.eclipse.jst.jee.server
很不爽,好好的项目不知道突然怎么了... 启动tomcat出个错,,,,, setting property 'source' to 'org.eclipse.jst.jee.server:jeesi ...
- 漫谈TCPIP协议原理
一.每次说道TCPIP协议,有能说会道者,总爱说三次握手,什么意思? 顾名思义,假设有两个机器A和B 1.当A发送给B一个包的时候,B接收到了,这个时候,B有两个选择,要么将包数据放入缓存,等待处理, ...
- lua路径问题
方法1:lua进行require绝对路径时,会从package.path中进行遍历 print(package.path)会得到类似下面的结果: --> "lualibs/p4ulib ...
- C# 获取类名
1.获取C#类中类名 System.Reflection.MethodBase.GetCurrentMethod().DeclaringType.Name; 2.获取C#类中类名(包含命名空间) Sy ...