基于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权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
随机推荐
- BZOJ 4817: [Sdoi2017]树点涂色（LCT+树剖+线段树）
题目描述 Bob有一棵 nn 个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. Bob ...
- PHP中implode()和explode()
1, implode()函数返回由数组元素组合成的字符串,函数语法:string implode(separator,array),separator参数可选,规定数组元素之间放置的内容,默认是空字符 ...
- Windows 下目录切换以及挂载小技巧
Windows 下目录切换以及挂载小技巧 一.前言: 作为几年的 Linux 老用户,再购买了一款新的本本只支持 Windows(主要是Linux下的驱动)操作系统后,加之发现 Windows 提供 ...
- python学习，day3：集合的学习
集合天生去重,另外集合非常便于两组数字的取交集,并集等计算 # coding=utf-8 # Author: RyAn Bi list_1 =[1,2,3,4,5,6,7] list_1 =set(l ...
- 洛谷 P4307 [JSOI2009]球队收益 / 球队预算（最小费用最大流）
题面 luogu 题解 最小费用最大流 先假设剩下\(m\)场比赛,双方全输. 考虑\(i\)赢一局的贡献 \(C_i*(a_i+1)^2+D_i*(b_i-1)^2-C_i*a_i^2-D_i*b_ ...
- 在使用Vue搭建前端服务器时，路由出现#号的解决办法
路由模式解析 这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置.如果有进行过服务器开发或者对http协议有所了解就会知道 ...
- 码云+jenkins+自动回复邮件
码云和jenkins的配置流程在Gitee Jenkins Plugin上介绍的很仔细. 附上码云官方Gitee Jenkins Plugin的介绍: https://gitee.com/help/a ...
- 安装APK时报 Installation failed with message Failed to finalize session : INSTALL_FAILED_USER_RESTRICTED: Invalid apk.
Installation failed with message Failed to finalize session : INSTALL_FAILED_USER_RESTRICTED: Invali ...
- SpagoBI系列----------[01]SpagoBI简介及安装步骤
商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的BI管理器能 够控制.校验.验证与分发这些BI对象. ...
- linux mint 18.1 安装nvidia显卡驱动
原文地址 http://www.gamersonlinux.com/forum/threads/updating-nvidia-drivers-mint.1746/ 主要步骤很简答 就是将ppa仓库地 ...