基于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权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
随机推荐
- JavaScript中setInterval的用法总结
setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时间显示. setInterval动作的语法格式如下:setInterva ...
- [开源JVM] yvm - 自制Java虚拟机
中文 | English | | | YVM是用C++写的一个Java虚拟机,现在支持Java大部分功能,以及一个基于标记清除算法的并发垃圾回收器. 不过还有很多bug等待修复. 感兴趣的朋友pull ...
- Leetcode 856. Score of Parentheses 括号得分(栈)
Leetcode 856. Score of Parentheses 括号得分(栈) 题目描述 字符串S包含平衡的括号(即左右必定匹配),使用下面的规则计算得分 () 得1分 AB 得A+B的分,比如 ...
- Hibernate 使用注释书写配置文件
Hibernate 使用注释 Hibernate使用注释有个好处就是我们不需要建立.hbm.xml文件,直接在实体类中添加注解就可以完成往数据库中进行数据操作 配置文件:hibernate.cfg.x ...
- Echo团队Alpha冲刺随笔 - 第七天
项目冲刺情况 进展 服务器部署完成.小程序改了几个BUG,WEB端大部分完成,后端主体功能大致完成. 问题 交接的时候出现很多新问题 心得 软工实践真棒!yeah!!! 今日会议内容 黄少勇 今日进展 ...
- jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容
jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容 .创建编辑器 UE.getEditor('editor', { initialFrameWidth:"100%" ...
- 用Javac编译Java文件时出现“编码 GBK 的不可映射字符“的error
前提:JDK版本 >= 1.6会出现编译报错, 1.6前只会是警告 以下是javac的document: 遇到这种情况的原因是: 文件编码格式与编译器编译所选的encoding不同,有非英文字符 ...
- oracle mysql的序列的新增、删除、修改及使用
序列的使用 参考文献: https://blog.csdn.net/meijory/article/details/51891529 1.序列介绍 序列: 是 oracle 提供的用于产生一系列唯一 ...
- CSAPP阅读笔记-存储器层次结构-第六章-P400-P462
6.1 存储技术 1.随机访问存储器(RAM),是易失性存储器,掉电存储信息会丢失,与之相对的是非易失性存储器(ROM),它掉电后存储信息不丢失,但前者访问速度较快,但容量有限,通常只有几百或几千兆字 ...
- UCF约束介绍
约束 (一)约束的分类: 利用FPGA进行系统设计常用的约束主要分为3类. (1)时序约束:主要用于规范设计的时序行为,表达设计者期望满足的时序条件,知道综合和布局布线阶段的优化算法等. (2)布局布 ...