基于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权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
随机推荐
- handlersocket优缺点
HandlerSocket的优势和特点: 1) 支持多种查询模式 HandlerSocket目前支持索引查询(主键索引和非主键的普通索引均可),索引范围扫描,LIMIT子句,也即支持增 ...
- POJ2279 Mr Young's Picture Permutations
POJ2279 Mr Young's Picture Permutations 描述: 有N个学生合影,站成左对齐的k排,每行分别有N1,N2…NK个人,第一排站最后,第k排站之前.学生身高依次是1… ...
- python学习笔记1.3
温度转换实例 #TempConvert.pyTempStr = input("请输入带有符号的温度值: ")if TempStr[-1] in ['F', 'f']:C = (ev ...
- HTML DOM--基础概述
DOM: Document Object Model(文档对象模型)的简写,那么,这是一种什么样的模型,简单点来说,就是将文档当成了一棵树.它独立于平台与语言,允许程序与脚本动态地访问.更新文档的结构 ...
- [BZOJ4204] 取球游戏（期望）
DarkBZOJ4204 (题面来源) [题目描述] 有\(m\)个球,一开始每个球均有一个初始标号,标号范围为\(1-n\)且为整数,标号为\(i\)的球有\(a_{i}\)个,并保证\(Σa_{i ...
- 微信小程序回到顶部的两种方式
一,使用view形式的回到顶部 <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bin ...
- MongoDB wiredTiger存储引擎下的存储方式LSM和B-Tree比较
前段时间做拦截件监控的时候把拦截件生命期存入mongodb,因生命期有各种变化,因此对此表的更新写操作非常多,老大给我看了一篇文章,才知道mongodb已经支持lsm存储方式了. 原文如连接:http ...
- JRebel idea 热部署
下载链接:https://pan.baidu.com/s/1CUvEarKVARJF46LJ2W90Lg 提取码:s46w 下载完以后是个ZIP(jr-ide-intellij-7.1.5_13-17 ...
- Java使用占位符拼接字符串-String.format()的使用
String domain = "www.ykmaiz.com"; int iVisit = 0; String info = String.format("该域名%s被 ...
- SpringCloud---声明式服务调用---Spring Cloud Feign
1.概述 1.1 Spring Cloud Ribbon.Spring Cloud Hystrix的使用几乎是同时出现的,Spring Cloud提供了一个更高层次的封装这2个工具类框架:Spring ...