ztree树形插件demo
导入ztree组件
<link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>
简单的demo
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css">
<script src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script src="plugins/ztree/js/jquery.ztree.all-3.5.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj; // 树形对象
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = { // 设置
data: {
simpleData: { // 开启了简单json数据结构
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
check: { //开启了复选框
enable: true
}
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
/* var zNodes = [ // 树上的节点 标准的json数据结构
{name:"test1", children:[
{name:"test1_1" ,children:[{name:"test1_1_1"},{name:"test1_1_2"},{name:"test1_1_3"}]}, {name:"test1_2"}]},
{name:"test2", children:[
{name:"test2_1"}, {name:"test2_2"}]}
];*/
var zNodes = [ // 树上的节点 简单的json数据结构
{id:1,name:"test1",pId:0},
{id:2,name:"test2",pId:0},
{id:11,name:"test11",pId:1},
{id:12,name:"test12",checked:"true",pId:1},
{id:111,name:"test111",pId:11},
{id:112,name:"test112",pId:11},
{id:113,name:"test113",pId:11},
{id:21,name:"test21",pId:2},
{id:22,name:"test22",pId:2},
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTreeObj.expandAll(true); //展开所有节点
});
function save() { //"1,32,3,5,6"
let ids = "";
var nodes = zTreeObj.getCheckedNodes(true);
for (let i = 0; i < nodes.length; i++) {
let id = nodes[i].id;
if(i== nodes.length-1){ //最后一个数
ids+=id;
}else{
ids+=id+",";
}
}
alert(ids);
}
</SCRIPT>
</HEAD>
<BODY>
<div>
<button onclick="save()">保存</button>
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
使用演示
属性插件中选中的多选框的值进行字符串拼接，传递给后台
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../base.jsp" %>
<!DOCTYPE html>
<html>
<head>
<base href="${ctx}/">
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2</title>
<meta name="description" content="AdminLTE2">
<meta name="keywords" content="AdminLTE2">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 页面meta /-->
<link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<SCRIPT type="text/javascript">
var zTreeObj;
var setting = {
check: {
enable: true,
chkStyle: "checkbox"
},
data: {
simpleData: {
enable: true
}
}
};
/*var zNodes =[
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"},
{ id:1, pId:0, name:"随意勾选 1", open:true}
];*/
$(document).ready(function () {
var url = "/system/role/getZtreeNodes.do";
var param = {"roleid": "${role.id}"};
$.get(url, param, function (data) {
// 调用初始化树的方法
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
//展开树结点
zTreeObj.expandAll(true);
}, "json");
});
//获取所有选择的节点，进行字符串拼接
function submitCheckedNodes() {
var nodes = new Array();
nodes = zTreeObj.getCheckedNodes(true); //取得选中的结点
let ids="";
for (let i = 0; i < nodes.length; i++) {
let id = nodes[i].id;
if(i== nodes.length-1){ //最后一个数 ，末尾不需要逗号
ids+=id;
}else{
ids+=id+",";
}
}
// 使用jq给隐藏域赋值
$('#moduleIds').val(ids);
//提交表单
$("form").submit();
}
</SCRIPT>
</head>
<body style="overflow: visible;">
<div id="frameContent" class="content-wrapper" style="margin-left:0px;height: 1200px" >
<section class="content-header">
<h1>
菜单管理
<small>菜单列表</small>
</h1>
<ol class="breadcrumb">
<li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content">
<!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">角色 [${role.name}] 权限列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="box-tools text-left">
<button type="button" class="btn bg-maroon" onclick="submitCheckedNodes();">保存</button>
<button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
</div>
<!--工具栏/-->
<!-- 树菜单 -->
<form name="icform" method="post" action="/system/role/updateRoleModule.do">
<input type="hidden" name="roleid" value="${role.id}"/>
<input type="hidden" id="moduleIds" name="moduleIds" value=""/>
<div class="content_wrap">
<div class="zTreeDemoBackground left" style="overflow: visible">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</form>
<!-- 树菜单 /-->
</div>
<!-- /数据表格 -->
</div>
<!-- /.box-body -->
</div>
</section>
</div>
</body>
</html>
后台接收controller
/*
*根据角色id查询当前角色下的菜单，在页面中设置选中状态
*/
/*
返回的数据为这种格式就行，ztree会根据id 和 pId进行树形封装
[
{ id:11, pId:1, name:"随意勾选 1-1"},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"随意勾选 1-2"}
]*/
@RequestMapping(value = "/getZtreeNodes",name ="获取树形节点数据")
@ResponseBody // 转json+把数据返回到浏览器
public List<Map> getZtreeNodes(String roleid){
// 查询当前角色下的菜单ids
List<String> roleModuleIdList = roleService.findModuleLisByRoleId(roleid); // 菜单id的集合
// 树形节点的数据是从哪里来的？ 从菜单表中获取的
List<Module> moduleList = moduleService.findAll();
// 重新构建一个集合
List<Map> ztreeNodes = new ArrayList<Map>();
Map map = null;
for (Module module : moduleList) {
map = new HashMap<>();
map.put("id",module.getId());
map.put("name",module.getName());
map.put("pId",module.getParentId());
// 判断roleModuleIdList是否包含 module.getId()
if(roleModuleIdList.contains(module.getId())){
map.put("checked",true); //判断当前角色下的菜单权限是否包含当前的菜单权限
}
ztreeNodes.add(map);
}
return ztreeNodes;
}
/*
*把选中的菜单，拼接成字符串，后台接收，通过逗号进行分割，根据role和每个moduleId插入到数据库中
*/
@RequestMapping(value = "/updateRoleModule",name ="给角色分配菜单的方法")
public String updateRoleModule(String roleid,String moduleIds){ //moduleIds="2,201"
roleService.updateRoleModule(roleid,moduleIds); // 从数据的本质上 就是向中间表插入数据
return "redirect:/system/role/list.do"; //完成菜单权限分配后 重定向到角色的列表页面
}
serviceImpl
// 储存角色和菜单
@Override
public void updateRoleModule(String roleid, String moduleIds) { //moduleIds ="1,3,556,67,89"
// 先删除 就是把这个角色下之前的菜单权限全部删除
// delete from pe_role_module where role_id=#{roleid}
roleDao.deleteRoleAndModuleByRoleId(roleid);
if(StringUtils.isNotEmpty(moduleIds)){
String[] mIds = moduleIds.split(",");
for (String mId : mIds) {
roleDao.saveRoleAndModule(roleid,mId);
}
// insert into pe_role_module(role_id,module_id) values (#{roleid},#{moduleid});
}
}
// 根据角色查询角色下所有菜单
@Override
public List<String> findModuleLisByRoleId(String roleid) {
return roleDao.findModuleLisByRoleId(roleid);
}
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
