最近在项目中使用到了ztree,在回显时候费了点时间,特记录下来供下次参考。

1、新增角色使用ztree加载权限,由于权限不多,所以使用直接全部加载。

效果图:

具体涉及ztree代码:

jsp中导入:/js/ztree/zTreeStyle.css和js/ztree/jquery.ztree.all-3.5.js

页面加入

<ul id="functionTree" class="ztree"></ul>

js代码(此js中加入了layer弹框效果):

<script>
$(function() {
// 授权树初始化
var setting = {
data : {
key : {
title : "t"
},
simpleData : {
enable : true
}
},
check : {//使用ztree选中效果
enable : true,
}
};
$.ajax({
url : '${pageContext.request.contextPath}/rest/sys/getAllFunction',//发送ajax请求加载权限数据
type : 'get',
dataType : 'json',
success : function(data) {//data就是服务端返回的权限数据
//var zNodes = eval("(" + data + ")");
//使用权限数据初始化ztree
$.fn.zTree.init($("#functionTree"), setting, data);
},
error : function(msg) {
alert('树加载异常!');
}
}); //确定添加按钮
$("#btn_submit").click(function() {
if(checkHousetype()){
//获得ztree对象
var treeObj = $.fn.zTree.getZTreeObj("functionTree");
//获得当前ztree对象选中的节点数组
var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
//循环数组,获得节点的ID,拼接成字符串使用逗号分隔
var array = new Array();
for(var i=0;i<nodes.length;i++){
array.push(nodes[i].id);
}
var ids = array.join(",");
$("input[name=funcitonIds]").val(ids); var formData = new FormData($("#formproject")[0]);
$.ajax({
type : "POST",
url : "${pageContext.request.contextPath }/rest/sys/addRole",
// data : $("#formproject").serialize(),
data:formData,
contentType: false,
processData: false,
statusCode : {
201 : function() {
layer.msg('新增角色成功!', {icon: 6,time:1500},function(){
location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
})
},
400 : function() {
layer.msg('提交的参数不合法', {time:1500});
},
500 : function() {
layer.msg('网络异常,请稍候再试!', {time:1500});
}
}
});
}
});
}); //校验
function checkHousetype(){
var flag = true ;
//关键字
if($("#code").val()==''){
flag = false ;
layer.msg('请输入关键字', {time:1500});
return flag ;
}
//名称
if($("#name").val()==''){
flag = false ;
layer.msg('请输入角色名称', {time:1500});
return flag ;
} return flag ;
}
</script>

权限中Ztree格式: 

     private String id;

    private String name;

    private String code;

    private String description;

   // private String page;

   //private String generatemenu;

   //private String zindex;

    private String pid;

    private boolean isParent;

     //ztree组件需要格式
public String getpId() {
return this.pid==null?"0":this.pid;
} ......

  

2、编辑角色回显Ztree

js代码:

<script>
var zNodes;
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
//当页面加载完毕,向后台发送ajax请求,获取用户id为1的用户所拥有的权限
//(这里要显示所有权限,该id用户的权限回显时,被自动选中),这里的用户id为1仅做测试使用,实际开发中会传值
function loadPower(roleId){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/rest/sys/queryFunByRoleId",
data:{"roleId":roleId},
async:false,
dataType:"json",
success:function(data){
zNodes=data;
}
})
}
$(function() {
// 授权树初始化
var setting = {
data : {
key : {
title : "t"
},
simpleData : {
enable : true
}
},
check : {//使用ztree选中效果
enable : true,
}
};
//页面加载完毕时加载此方法
$(document).ready(function(){
var id = $("#roleId").val();
loadPower(id);
$.fn.zTree.init($("#functionTree"), setting, zNodes);
}); //确定添加按钮
$("#btn_submit").click(function() {
if(checkHousetype()){
//获得ztree对象
var treeObj = $.fn.zTree.getZTreeObj("functionTree");
//获得当前ztree对象选中的节点数组
var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
//循环数组,获得节点的ID,拼接成字符串使用逗号分隔
var array = new Array();
for(var i=0;i<nodes.length;i++){
array.push(nodes[i].id);
}
var ids = array.join(",");
$("input[name=funcitonIds]").val(ids); var formData = new FormData($("#formproject")[0]);
$.ajax({
type : "POST",
url : "${pageContext.request.contextPath }/rest/sys/eidtRole",
// data : $("#formproject").serialize(),
data:formData,
contentType: false,
processData: false,
statusCode : {
201 : function() {
layer.msg('编辑角色成功!', {icon: 6,time:1500},function(){
location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
})
},
400 : function() {
layer.msg('提交的参数不合法', {time:1500});
},
500 : function() {
layer.msg('网络异常,请稍候再试!', {time:1500});
}
}
});
}
});
}); //校验
function checkHousetype(){
var flag = true ;
//关键字
if($("#code").val()==''){
flag = false ;
layer.msg('请输入关键字', {time:1500});
return flag ;
}
//名称
if($("#name").val()==''){
flag = false ;
layer.msg('请输入角色名称', {time:1500});
return flag ;
} return flag ;
}
</script>

java后台:

controller:

/**
* 编辑角色,回显角色权限
* @param roleId
* @return
*/
@RequestMapping(value = "queryFunByRoleId", method = RequestMethod.POST)
public ResponseEntity<List<Map<String, Object>>> queryFunByRoleId(String roleId) {
try {
if(StringUtils.isBlank(roleId)){
// 返回400
return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null);
}
return ResponseEntity.ok(sysService.queryFunByRoleId(roleId));
} catch (Exception e) {
e.printStackTrace();
}
// 出错 500
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}

service:

由于List中的contains方法校验老是失败,也没纠结什么原因,自己写的根据id校验

/**
* zTree v3回显
* 初始化化权限树
* 拼接treeNode属性
*/
@Transactional(readOnly=true)
public List<Map<String, Object>> queryFunByRoleId(String roleId) {
//查询所有权限
List<AuthFunction> functions = queryAllAuthFunction();
//查询指定角色的权限
List<AuthFunction> functionsByRoleId = findFunctionByRoleId(roleId);
//包装zTree List<Map<String, Object>> list =new ArrayList<Map<String, Object>>();
Map<String, Object>map=null;
for(int i=0;i<functions.size();i++){
map=new HashMap<>();
//Role role=functions.get(i);
AuthFunction fun = functions.get(i);
map.put("id", fun.getId());
map.put("pId", fun.getpId());
map.put("name", fun.getName());
map.put("isParent", fun.getIsParent());
//判断指定用户的角色是否在所有角色中包含,有则设置checked=true.
if(functionsByRoleId != null && functionsByRoleId.size()>0 && ListIsContainsObj(functionsByRoleId,fun)){
map.put("checked",true);
}else {
map.put("checked",false);
}
list.add(map);
}
return list;
} //校验全部权限中是否有某个权限,有返回true
private boolean ListIsContainsObj(List<AuthFunction> functions, AuthFunction fun) {
if(fun == null || functions == null || functions.size()<=0){
return false;
}
for (AuthFunction authFunction : functions) {
if(fun.getId().equals(authFunction.getId())){
return true;
}
}
return false;
}

  

使用Ztree新增角色和编辑角色回显的更多相关文章

  1. springmvc+ztree v3实现类似表单回显功能

    在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...

  2. angularjs 实现下拉框编辑数据回显

    https://www.cnblogs.com/janice-jia/p/9764938.html 正常的js回显选择,需要添加 select ="selected",angula ...

  3. SpringBoot系列——附件管理:整合业务表单实现上传、回显、下载

    前言 日常开发中,大多数项目都会涉及到附件上传.回显.下载等功能,本文记录封装通用附件管理模块,并与业务模块进行整合实现上传.回显.下载 我们之前已经对文件上传下载有过记录,传送门:基于"f ...

  4. Identity角色管理三(编辑角色)

    因只有角色名能修改故继续使用创建角色的视图模型 using System.ComponentModel; using System.ComponentModel.DataAnnotations; na ...

  5. asp.net Identity2 角色(Role)的使用(二)角色管理,角色控制器和视图

    新建一个AdminViewModel 文件,建立视图模型类 public class RoleViewModel { public string Id { get; set; } [Required( ...

  6. vue编辑回显问题

    真是疯了,vue怪毛病真多 就下面这玩意儿,多选组合框,新增的时候好用的不行不行的,到了编辑的时候,要回显数据,怪毛病一堆一堆的 首先,回显的时候要传一个数组,但是这个数组里的元素得是字符串类型的,如 ...

  7. SQLServer中服务器角色和数据库角色权限详解

    角色 当几个用户需要在某个特定的数据库中执行类似的动作时(这里没有相应的Windows用户组),就可以向该数据库中添加一个角色(role).数据库角色指定了可以访问相同数据库对象的一组数据库用户. 数 ...

  8. zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案

    zTree新增的根结点再新增子节点reAsyncChildNodes不生效解决方案, zTree新的根结点不能异步刷新,reAsyncChildNodes不生效解决方案, reAsyncChildNo ...

  9. z-tree 回显所有选中的id

    //回显选择的checkbox函数 function treeHxIdFun(obj) { var objTree = $.fn.zTree.init($("#demo"), se ...

随机推荐

  1. 集大软件工程15级个人作业Week2

    集大软件工程15级个人作业Week2 快速通读教材<构建之法>,并参照提问模板,提出5个问题. 在每个问题后面,请说明哪一章节的什么内容引起了你的提问,提供一些上下文 列出一些事例或资料, ...

  2. The folder can’t be opened because you don’t have permission to see its contents.

    1 自己在windows上面copy过去的文件夹,在Mac下面无法查看 一开始以为是windows文件的权限问题,然后 自己赋予了everyone所有的权限,结果在Mac上面还是无法打开文件夹 2 最 ...

  3. 为什么还原innobackupex备份后查看到的Executed_Gtid_Set与xtrabackup_binlog_info不一致

    基本环境:官方社区版MySQL 5.7.19,innobackupex version 2.4.8 一.什么不一致 1.1.不一致 首先使用下面脚本来构建Executed_Gtid_Set与xtrab ...

  4. swift学习第一天---常量变量基础数据类型

    import Foundation /** * 1.常量 变量 知识要点:常量的定义用let 变量的定义用var 常量一旦定义便不可再更改. 变量定义之后可以在定义之后的程序中任意地方进行修改. */ ...

  5. iptables学习笔记_____摘自朱双印个人日志 ____http://www.zsythink.net/

    iptables为我们预先定义了四张表 raw.mangle.nat.filter filter表负责过滤:允许那些ip访问.拒绝那些ip访问.允许那些端口...是最常用的表 #查看表里面所有的规则i ...

  6. 深入理解linux内核v4l2框架之videobuf2【转】

    转自:https://blog.csdn.net/ramon1892/article/details/8444193 Videobuf2框架 1. 什么是videobuf2框架? 它是一个针对多媒体设 ...

  7. n个随机变量中第k小值的期望

    Problem 有\(n\)个相互独立的取值在\([0,1]\)的随机变量,问其中第\(k\)小的变量期望是多少? Solution 之前pkuwc的神仙找我换友链,让我受宠若惊.. 我今天突然翻到他 ...

  8. 安装jdk的时候为什么会有两个jre文件

    有些东西,你懂不懂其实并不太影响你干活,但有些人就是有疑惑就非得弄懂,不然浑身难受,我大概就是这种德性的.昨天安装javaSE的时候,看到jdk中有个jre文件夹,而根目录下又有个jre文件夹,非常困 ...

  9. Linux关闭防火墙,开放端口

    Centos/redhat系统: 开启防火墙 #systemctl start firewalld.service 停止firewall #systemctl stop firewalld.servi ...

  10. uboot 传递的参数 mtdparts

    启动uboot后,在重新烧写程序之前,查看传递给内核的参数时(命令为: printenv),看到如下内容: bootargs=console=ttyS0,115200 mtdparts=spi0.0: ...