引入css和js
<link rel="stylesheet" href="/${appName}/commons/jslib/ztreeV3.5.15/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
<script type="text/javascript" src="/${appName}/commons/jslib/ztreeV3.5.15/jquery.ztree.all-3.5.js"></script>
html
<ul id="treeModule" class="ztree" style="height:280px"></ul>
加載樹
/*配置*/
var setting = {
check: { //顯示多選框,節點中checked字段控制
enable: true,
autoCheckTrigger: true,
chkStyle: "checkbox",
chkboxType: { "Y": "ps", "N": "ps" }
},
data: {
key:{
name:"moduleName" //顯示節點字段
},
simpleData: {
enable: true,
idKey: "moduleCode", //id字段
pIdKey: "parentCode", //父級id字段
rootPId: 0 //根id值
}
}
};
/**菜單顯示*/
var roleCode_access;
function accessShow(roleCode){
roleCode_access = roleCode;
$('#accesswin').modal('show');
//樹
$.ajax({
url:'/${appName}/manager/moduleController/getAllModules',
type:'post',
async:'true',
cache:false,
data:{roleCode:roleCode_access},
dataType:'json',
success: function(data){
$.fn.zTree.init($("#treeModule"), setting, data);
}
});
}
擷取勾選框的值
var mids ='';
var treeObj = $.fn.zTree.getZTreeObj("treeModule");
var nodes = treeObj.getCheckedNodes(true);
for(i=0;i<nodes.length;i++){
mids = mids+nodes[i].moduleCode+',';
}
背景代碼
SysModule.java
public class SysModule {
private String moduleCode;
private String moduleName;
private String modulePath;
private String parentCode;
private String isLeaf;
private String sortNumber;
private String checked; //是否勾選
private String open = "true"; //是否展開,預設展開
}
Controller層
/**
* 擷取所有菜單
* @return
*/
@RequestMapping("getAllModules")
@ResponseBody
public List<SysModule> getAllModules(String roleCode){
List<SysModule> result = moduleService.getAllModules();
List<SysModule> binded = moduleService.getModulesByRoleCode(roleCode);
Iterator<SysModule> iterator = result.iterator();
/*周遊所有菜單*/
while (iterator.hasNext()){
SysModule module= iterator.next();
/*周遊所有已綁定的菜單*/
Iterator<SysModule> iterator_binded = binded.iterator();
while (iterator_binded.hasNext()){
SysModule module_binded= iterator_binded.next();
if (module.getModuleCode().equals(module_binded.getModuleCode())){
module.setChecked("true");
}
}
}
return result;
}
Service層
/**
* 擷取所有菜單
* @return
*/
public List<SysModule> getAllModules(){
List<SysModule> modules = moduleMapper.getAllModules();
return modules;
}
/**
* 根據角色code擷取綁定的菜單
* @param roleCode
* @return
*/
public List<SysModule> getModulesByRoleCode(String roleCode){
List<SysModule> modules = moduleMapper.getModulesByRoleCode(roleCode);
return modules;
}
/**
* 擷取所有菜單
* @return
*/
List<SysModule> getAllModules();
/**
* 根據角色編碼擷取綁定的菜單
* @param roleCode
* @return
*/
public List<SysModule> getModulesByRoleCode(String roleCode);
<!--擷取所有菜單-->
<select id="getAllModules" resultType="com.autumn.pojo.SysModule">
select * from sys_module
</select>
<!--根據rolecode擷取綁定的菜單-->
<select id="getModulesByRoleCode" resultType="com.autumn.pojo.SysModule">
select sm.* from sys_module sm
left join sys_role_module srm on sm.moduleCode = srm.moduleCode
where srm.roleCode= #{roleCode}
</select>
CREATE TABLE IF NOT EXISTS `sys_module` (
`moduleCode` varchar(36) NOT NULL COMMENT '子產品編号',
`moduleName` varchar(50) DEFAULT NULL COMMENT '子產品名稱',
`modulePath` varchar(1000) DEFAULT NULL COMMENT '子產品通路路徑',
`parentCode` varchar(36) DEFAULT NULL COMMENT '父子產品編号',
`isLeaf` int(11) DEFAULT NULL COMMENT '是否葉子節點:0 否,1 是',
`sortNumber` int(11) DEFAULT NULL COMMENT '排序号',
PRIMARY KEY (`moduleCode`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='子產品表';
CREATE TABLE IF NOT EXISTS `sys_role` (
`roleCode` varchar(36) NOT NULL COMMENT '角色編号',
`roleName` varchar(50) NOT NULL COMMENT '角色名稱',
PRIMARY KEY (`roleCode`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='角色表';
CREATE TABLE IF NOT EXISTS `sys_role_module` (
`rmId` varchar(36) NOT NULL COMMENT '唯一編号',
`roleCode` varchar(36) NOT NULL COMMENT '角色編号',
`moduleCode` varchar(50) NOT NULL COMMENT '子產品編号',
PRIMARY KEY (`rmId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='使用者角色-子產品關聯表';