ztree树插件- 树形多选结构展示
1、首先导入Bootstrap js、样式
<link rel="stylesheet" href="../../static/common/ztree/css/metroStyle/metroStyle.css" />
<script src="/static/common/ztree/js/jquery.ztree.all.min.js">script>
2、引入的 selectree.js (这是固定代码，哪里有变动我会详细说明)
/**
* 多选框插件
*/
$(document).ready(function() {
$('input').iCheck({
checkboxClass : 'icheckbox_flat-green',
radioClass : 'iradio_flat-green'
});
});
/**
* 系统提示
*/
$(function() {
$('.system-tip').on("click", function() {
layer.tips('"是" 只有超级管理员能修改
"否" 拥有角色修改权限能修改', '.system-tip');
})
$('.status-tip').on("click", function() {
layer.tips('"开启" 代表此数据可用
"冻结" 代表此数据不可用', '.status-tip');
})
})
/**
* 初始化菜单树
*/
var menuZtreeObj;var deptZtreeObj;
var menuZtreeSetting = {
data : {
simpleData : {
enable : true,
idKey : "menuId",
pIdKey : "parentId",
rootPId : 0
},
key : {
name : 'menuName',
title : 'menuName'
}
},
check : {
enable : true,
nocheckInherit : true
}
};
var deptZtreeSetting = {
data : {
simpleData : {
enable : true,
idKey : "deptId",
pIdKey : "parentId",
rootPId : 0
},
key : {
name : 'deptName',
title : 'deptName'
}
},
check : {
enable : true,
nocheckInherit : true
}
};
$(function() {
menuTreedata = eval('(' + menuTreedata + ')');
menuZtreeObj = $.fn.zTree.init($("#menuZtree"), menuZtreeSetting, menuTreedata);
deptZtreeSetting.check.chkboxType = { "Y" : "", "N" : "" };
deptTreedata = eval('(' + deptTreedata + ')');
deptZtreeObj = $.fn.zTree.init($("#deptZtree"), deptZtreeSetting, deptTreedata);
//展开所有节点
//ztreeObject.expandAll(true);
})
/**
* 表单验证
*/
$(function() {
$('#form').bootstrapValidator({
container : 'tooltip',
message : 'This value is not valid',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
'positionName' : {
message : '角色名称验证失败',
validators : {
notEmpty : {
message : '角色名称不能为空'
}
}
},
'positionCode' : {
message : '角色编码验证失败',
validators : {
notEmpty : {
message : '角色编码不能为空'
}
}
},
}
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
debugger
menuZtreeObj = $.fn.zTree.getZTreeObj("menuZtree");
var menuNodes = menuZtreeObj.getCheckedNodes(true);
var menuIds = '';
if (menuNodes != null && menuNodes.length > 0) {
for (var i = 0; i < menuNodes.length; i++) {
menuIds += menuNodes[i].menuId + ',';
}
}
deptZtreeObj = $.fn.zTree.getZTreeObj("deptZtree");
var deptNodes = deptZtreeObj.getCheckedNodes(true);
var deptIds = '';
if (deptNodes != null && deptNodes.length > 0) {
for (var i = 0; i < deptNodes.length; i++) {
deptIds += deptNodes[i].deptId + ',';
}
}
debugger
var params = '';
params += $form.serialize();
params += "&menuIds=" + menuIds;
params += "&deptIds=" + deptIds;
var method = $('#form').attr('data-method');
// Use Ajax to submit form data
if (method === 'put') {
$.ajax({
data : params,
dataType : 'json',
type : 'put',
url : $form.attr('action'),
success : function(result) {
if (result.code === "200" && result.data===1) {
parent.layer.msg("操作角色成功!", {
shade : 0.3,
time : 1500
}, function() {
window.parent.location.reload(); // 刷新父页面
});
} else if(result.code === "200" && result.data === 0){
layer.msg('提交失败，当前角色名称已存在!', {
icon : 2,
time : 3000
});
} else {
layer.msg(result.message, {
icon : 2,
time : 1000
});
}
}
})
} else if (method === 'post') {
$.ajax({
data : params,
dataType : 'json',
type : 'post',
url : $form.attr('action'),
success : function(result) {
if (result.code === "200" && result.data === 1) {
parent.layer.msg("操作角色成功!", {
shade : 0.3,
time : 1500
}, function() {
window.parent.location.reload(); // 刷新父页面
});
} else if(result.code === "200" && result.data === 0){
layer.msg('提交失败，当前角色名称已存在!', {
icon : 2,
time : 3000
});
} else {
layer.msg(result.message, {
icon : 2,
time : 1000
});
}
}
})
}
});
})
3、HTML 页面中接收数据
<!-- 自定义js -->
<script type="text/javascript">
var menuTreedata = '${menus}';//ztree
var deptTreedata = '${depts}';//ztree
</script>
// input框在页面上展示数据
<div class="form-group">
<label class="col-sm-2 col-xs-offset-1 control-label">角色授权：</label>
<div class="col-sm-9">
<div id="menuZtree" class="ztree"></div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 col-xs-offset-1 control-label">部门授权：</label>
<div class="col-sm-9">
<div id="deptZtree" class="ztree"></div>
</div>
</div>
4、前台说完了，咱们主要来看后台代码的实现，如何返回json数据，是通过什么方式 继续往下看
后台代码
1、Controller
@RequestMapping("/toEdit")
public ModelAndView toEdit(String positionId){
ModelAndView mv = new ModelAndView("position/positionEdit");
SysPosition position = iSysPositionService.getById(positionId);
List<SysMenu> menuList = iSysMenuService.findMenuByIsDelete(false);
List<SysPositionMenu> pmList = iSysPositionMenuService.findPositionMenuId(positionId);
List<SysDepartment> deptList = departmentService.list(new QueryWrapper<SysDepartment>().lambda().eq(SysDepartment::getIsDelete,0));
List<SysPositionDept> pdList = sysPositionDeptService.list(new QueryWrapper<SysPositionDept>().lambda().eq(SysPositionDept::getPositionId,positionId));
List<Map> list = new ArrayList<Map>();
Map<String,Object> map;
for(SysMenu menu:menuList){
map = new HashMap<>();
map.put("menuId", menu.getId());
map.put("menuName", menu.getMenuName());
map.put("parentId", menu.getParentId());
for(SysPositionMenu syspm : pmList){
if(StringUtils.equals(syspm.getMenuId(),menu.getId())){
map.put("checked",true);
continue;
}
}
if(StringUtils.equals(menu.getParentId(),"0")){
map.put("open", true);
}
list.add(map);
}
List<Map> depts = new ArrayList<>();
for (SysDepartment dept : deptList){
map = new HashMap<>();
map.put("deptId", dept.getId());
map.put("deptName", dept.getDepartmentName());
map.put("parentId", dept.getParentId());
for(SysPositionDept syspd : pdList){
if(StringUtils.equals(syspd.getDeptId(),dept.getId())){
map.put("checked",true);
continue;
}
}
// if(StringUtils.equals(dept.getParentId(),"0")){
// map.put("open",true);
// }
depts.add(map);
}
mv.addObject("menus", JSON.toJSONString(list));
mv.addObject("depts",JSON.toJSONString(depts));
return mv;
}
5、树形结构 以及 结构数据格式
6、json数据格式
menuIds=0,1,11,13,7,8,9,2,15,3f77cd6140e15d0d7d9d2ae7ecd99b4b,5,565fc9e3f5fdb66f86f06bf12644f81a,3,10,7e3bad41f86298a796629d011cf76263,6fb9a73cd424433e3e4e059870e8a6bb,fa5fa01390cc5d4589887a59b40e514d,e1786a17b74d11e9a45400163e2e7cd0,56b5bf36f7577cf8252dc34ea5fdb327,
String[] menuIdArr = menuIds.split(",");