基于easyUI实现权限管理系统（一）一—组织结构树图形
此文章是基于 EasyUI+Knockout实现经典表单的查看、编辑
一. 相关文件介绍
1. organize.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"%>
</head>
<body>
<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" title="编辑" data-bind="click:editClick" >编辑</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-group" title="设置角色" data-bind="click:roleClick">设置角色</a>
</div> <div id="gridlist" class="wrapper" style="width: 100%; height: 100%; margin-top:15px;"></div> <script type="text/html" id="edit-template">
<div class="container_16" style="width:90%;margin:5%;">
<div class="grid_3 lbl" >上级机构</div>
<div class="grid_13 val" ><input class="txtBox" data-bind="easyuiCombotree:combotree,combotreeValue:form.parentId" /></div>
<div class="grid_3 lbl">机构名称</div>
<div class="grid_13 val"><input class="txtBox easyui-validatebox" style="width:220px;" data-bind="value:form.organizeName" data-options="required:true,validateOnCreate:false,validateOnBlur:true" /></div>
<div class="grid_3 lbl">备注</div>
<div class="grid_13 val"><textarea class="txtBox" style="width:220px;height:50px;" data-bind="value:form.description" ></textarea></div>
<div class="clear"></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-org32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:organizeName">机构名称</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 type="text/javascript" src="viewModel/sys/organize.js"></script>
<script type="text/javascript" src="viewModel/sys/organizeTreeGraph.js"></script> <script type="text/javascript">
var data = ${data};
ko.bindingViewModel(new viewModel());
using(['dialog','combotree','messager'])
</script>
</body>
</html>
2. organize.js：实现界面按钮的功能
function viewModel() {
var self = this;
this.refreshClick = function () {
window.location.reload();
};
this.save = function (vm,win) {
var post = { form: ko.toJS(vm.form) };
com.ajax({
type: 'POST',
url: rootPath+'/sys/organize!edit.do',
data: JSON.stringify(post),
success: function (d) {
com.message('success', '保存成功！');
win.dialog('close');
window.location.reload();
}
});
}
this.addClick = function () {
var defaults = { parentId: (self.selectNode || {}).id || 0 };
self.openDiloag("添加新机构", defaults, function (vm, win) {
if (com.formValidate(win)) {
vm.form._id = vm.form.id();
self.save(vm,win);
}
});
};
this.editClick = function () {
if (!self.selectNode) return com.message('warning', '请先选择一个机构！');
self.openDiloag("编辑机构-"+self.selectNode.organizeName,self.selectNode, function (vm, win) {
if (com.formValidate(win)) {
self.save(vm,win);
}
});
};
this.deleteClick = function () {
if (!self.selectNode) return com.message('warning', '请先选择一个机构！');
if (utils.isNotEmpty(self.selectNode.children)) return com.message('warning', '请先删除子机构！');
com.message('confirm', '确认要删除选中的机构吗？', function (b) {
if (b) {
com.ajax({
type: 'DELETE',
url: rootPath+'/sys/organize!delete.do?id=' + self.selectNode.id,
success: function (d) {
com.message('success', '删除成功！');
window.location.reload();
}
});
}
});
};
this.roleClick = function () {
if (!self.selectNode)
return com.message('warning', '请先选择一个机构！');
com.dialog({
title: "设置角色",
width: 600,
height: 450,
html: "#setrole-template",
viewModel: function (w) {
var thisRole = this;
this.organizeName = ko.observable(self.selectNode.organizeName);
com.loadCss(rootPath+'/content/css/metro/css/modern.css', parent.document);
com.ajax({
type: 'GET',
url: rootPath+'/sys/role!getRoleWithOrganizeCheck.do?organizeId=' + self.selectNode.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 == 'true' ? '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({ id: $(this).attr('role') });
});
com.ajax({
url: rootPath+'/sys/role!editOrganizeRoles.do?organizeId=' + self.selectNode.id,
data: ko.toJSON(roles),
success: function (d) {
thisRole.cancelClick();
com.message('success', '保存成功！');
}
});
};
this.cancelClick = function () {
w.dialog('close');
};
}
});
};
this.openDiloag = function (title,node,fnConfirm) {
com.dialog({
title: title,
height: 250,
width: 400,
html: "#edit-template",
viewModel: function (w) {
var that = this;
this.combotree = {
width:228,
data: self.combotreeData,
onBeforeSelect: function (node) {
var isChild = utils.isInChild(self.combotreeData, that.form._id, node.id);
com.messageif(isChild, 'error', '不能将自己或下级设为上级机构');
return !isChild;
}
},
this.form = {
_id:node.id,
parentId: ko.observable(node.parentId),
id: ko.observable(node.id),
organizeName: ko.observable(node.organizeName),
description: ko.observable(node.description)
};
this.confirmClick = function () {
fnConfirm(this,w);
};
this.cancelClick = function () {
w.dialog('close');
};
}
});
};
this.initTreeData = function () {
var list = utils.filterProperties(data, ['id as id', 'parentId as pid', 'organizeName as text']);
var treeData = utils.toTreeData(list, "id", "pid", "children");
treeData.unshift({ "id": 0, "text": "==请选择==" });
self.combotreeData = treeData;
};
this.initGraph = function (data) {
self.data = data;
var wrapper = $("div.wrapper").empty();
var treeData = utils.toTreeData(data, "id", "parentId", "children");
var tb = renderTreeGraph(treeData);
tb.appendTo(wrapper);
//绑定事件
$(wrapper).find(".td-node").click(function () {
$(".td-node").css({ "background-color": "#f6f6ff", "color": "" });
$(this).css({ "background-color": "#faffbe", "color": "#FF0000" });
self.selectNode = $(this).data("node");
}).dblclick(self.editClick);
if (self.selectNode) {
$("#td" + self.selectNode.id).css({ "background-color": "#faffbe", "color": "#FF0000" });
}
};
this.initGraph(data);
this.initTreeData();
}
3. organizeTreeGraph.js：实现结构树的绘制
function renderTreeGraph(treeData) {
//生成图形
var tb = $('<table class="tb-node" cellspacing="0" cellpadding="0" align="center" border="0" style="border-width:0px;border-collapse:collapse;margin:0 auto;vertical-align:top"></table>');
var tr = $('<tr></tr>');
for (var i in treeData) {
if (i > 0) $('<td> </td>').appendTo(tr);
$('<td style="vertical-align:top;text-align:center;"></td>').append(createChild(treeData[i])).appendTo(tr);
}
tr.appendTo(tb);
return tb;
}
//递归生成机构树图形
function createChild(node, ischild) {
var length = (node.children || []).length;
var colspan = length * 2 - 1;
if (length == 0)
colspan = 1;
var fnTrVert = function () {
var tr1 = $('<tr class="tr-vline"><td align="center" valign="top" colspan="' + colspan + '"><img class="img-v" src="'+rootPath+'/content/images/tree/Tree_Vert.gif" border="0"></td></tr>');
return tr1;
};
//1.创建容器
var tb = $('<table class="tb-node" cellspacing="0" cellpadding="0" align="center" border="0" style="border-width:0px;border-collapse:collapse;margin:0 auto;vertical-align:top"></table>');
//var tb = $('<table style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" border="1" cellspacing="0" cellpadding="2" align="center"></table>');
//2.如果本节点是子节点，添加竖线在节点上面
if (ischild) {
fnTrVert().appendTo(tb);
}
// 3.添加本节点到图表
var tr3 = utils.functionComment(function () {/*
<tr class="tr-node"><td align="center" valign="top" colspan="{0}">
<table align="center" style="border:solid 2px" border="1" cellpadding="2" cellspacing="0">
<tr>
<td class="td-node" id='td{3}' data-node='{2}' align="center" valign="top" style="background-color:#f6f6ff;cursor:pointer;padding:2px;">{1}</td>
</tr>
</table>
</td></tr> */
});
tr3 = utils.formatString(tr3, colspan, node.organizeName, JSON.stringify(node),node.id);
$(tr3).appendTo(tb);
// 4.增加上下级的连接线
if (length > 1) {
//增加本级连接下级的首节点竖线，在节点下方
fnTrVert().appendTo(tb);
//增加本级连接下级的中间横线
var tr4 = utils.functionComment(function () {/*
<tr class="tr-hline">
<td colspan="1">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="50%" style="background:url(rootPath/content/images/tree/Tree_Empty.gif)"></td>
<td width="3px" height="3px" ><img src="rootPath/content/images/tree/Tree_Dot.gif" border="0"></td>
<td width="50%" style="background:url(rootPath/content/images/tree/Tree_Dot.gif)"></td>
</tr>
</tbody>
</table>
</td>
<td style="background:url(rootPath/content/images/tree/Tree_Dot.gif)" colspan="{0}"></td>
<td colspan="1">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="50%" style="background:url(rootPath/content/images/tree/Tree_Dot.gif)"></td>
<td width="3px" height="3px" ><img src="rootPath/content/images/tree/Tree_Dot.gif" border="0"></td>
<td width="50%" style="background:url(rootPath/content/images/tree/Tree_Empty.gif)"></td>
</tr>
</tbody>
</table>
</td>
</tr>*/});
tr4 = tr4.replace(/rootPath/g,rootPath);
tr4 = utils.formatString(tr4, colspan - 2);
$(tr4).appendTo(tb);
}
//5.递归增加下级所有子节点到图表
if (length > 0) {
var tr5 = $('<tr></tr>');
for (var i in node.children) {
if (i > 0) {
$('<td> </td>').appendTo(tr5);
}
$('<td style="vertical-align:top;text-align:center;"></td>').append(createChild(node.children[i], true)).appendTo(tr5);
}
tr5.appendTo(tb);
}
return tb;
}
二. 效果图
1. 访问：http://localhost:8080/ims/sys/organize.do
2. 选择一个机构，点击 设置角色
基于easyUI实现权限管理系统（一）一—组织结构树图形的更多相关文章
- 基于easyUI实现权限管理系统（三）——角色管理
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. role.jsp:角色管理界面 <!DOCTYPE html PUBLIC "-//W3 ...
- 基于easyUI实现权限管理系统（四）——用户管理
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. user.jsp:用户管理界面 <!DOCTYPE html PUBLIC "-//W3 ...
- 基于easyUI实现权限管理系统（二）——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. menu.jsp:菜单导航主界面 <!DOCTYPE html PUBLIC "-//W ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
- （转）ASP.NET MVC4+EasyUI+EntityFrameWork权限管理系统——数据库的设计（一）
原文地址:http://www.cnblogs.com/cmsdn/p/3371576.html 快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一 ...
- 项目：rbac 基于角色的权限管理系统；
- 简单示意流程图 - RBAC分析: - 基于角色的权限管理: - 权限等于用户可以访问的URL: - 通过限制URL来限制权限: - RBAC表结构组成: from django.db impor ...
- Oracle+FluentData+MVC4+EasyUI开发权限管理系统之开篇
在园子里有很多EF+MVC+EasyUI的框架实在是太多了,经过在一段时间的学习高手写的思路,但是都是针对Sql数据的,但是今年我当上研发组组长的第一个任务就是编写一个通用平台框架,一刚开始想把学习过 ...
- 基于easyUI实现组织结构树图形
一. 准备工作 1. 点击此下载相关文件 2. 进入 js 文件夹,解压缩 jquery-easyui-1.5.rar 到当前文件夹 二. 在浏览器中运行 organize.html 文件,即可看到效 ...
随机推荐
- 使用ls,du命令进行文件排序
一. 使用du命令进行大小排序 du -h --max-depth=1 | sort -hr 参数说明: --max-depth:表示要查看几层目录 sort -r:反向显示 sort -h: ...
- jxl操作excel单个单元格换行和获取换行
excel中同表格换行: a+"\n"+b 1.读取 String str = sheet.getCell(c, r).getContents(); String[] split ...
- Maven依赖的JAR包下载慢？赶紧看过来
相信许多JAVA开发者在日常工作中时常会碰到这种情况,那就是编译Maven工程时,工程所依赖的jar包文件下载非常慢,甚至经常出现下载不成功的问题,今天,小编就给大家讲讲如何提升Maven依赖包的下载 ...
- Linux/Windows 平台最容易安装 Composer教程
我们采用的是全局安装方式,这样的话,就能够在命令行窗口中直接执行 composer 命令了. Mac 或 Linux 系统: 打开命令行窗口并执行如下命令将前面下载的 composer.phar 文件 ...
- selectComponent是ok的，小程序组件 component方式，让子页面重绘
this.selectComponent('#news').init(); 其中news是父级xml文件引用子组件的时给子组件的id. 当父级传给子级的数据有变化时,需要子页面重绘,所以就用上面那行代 ...
- System Verilog基础（一）
学习文本值和基本数据类型的笔记. 1.常量(Literal Value) 1.1.整型常量 例如:8‘b0 32'd0 '0 '1 'x 'z 省略位宽则意味着全位宽都被赋值. 例如: :] sig1 ...
- supervisor使用小记
最近使用supervisor部署爬虫,百度了很多,磕磕绊绊自己也算是用起来了,以下是整理的使用情况. 第一步: 下载安装supervisor 使用的ubuntu16.04,直接 sudo apt-ge ...
- linux gpasswd
gpasswd命令 功能:管理组用法:gpasswd[-a user][-d user][-A user,...][-M user,...][-r][-R]groupname参数:-a:添加用户到组- ...
- Android Notification 的四种使用方式
实现通知步骤 一般实现通知需要如下步骤: 1.获取 NotificationManager 实例管理通知: 2.实例 Notification 对象: 3.管理事件 Intent: 4.发送通知. 注 ...
- 初次使用github的艰难尝试。
序言 github是全英文的网站,初次使用在没有翻译成中文的情况下很容易做出很多无意义或误操作. 当对本地的文件进行修改后,有时候只是想更新到fork下来的自己的仓库里,看看改得效果如何 .有时候是想 ...