Ztree树的概念
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。
ZTree树格式:
ZNodes=[{},{},{}...];
{}内部必须要有ip,name,pId(父Id),checked(可选)。
当要封装的类中没有以上属性时,需要在类中添加以上属性并添加其set(),get()方法。
在前端准备好需要的数据。
@RequestMapping("toroleModule")
public String toRoleModule(String roleId,Model model) throws JsonProcessingException{
//准备数据
List<Module> moduleList=roleService.findModuleList();
//查询Role中是否已有Module的信息
List<String> roleList=roleService.findRoleModuleById(roleId);
System.out.println(roleList);
for (Module module : moduleList) {
if(roleList.contains(module.getModuleId())){
module.setChecked("true");
}
}
ObjectMapper objectMapper=new ObjectMapper();
String json = objectMapper.writeValueAsString(moduleList);
model.addAttribute("json", json);
System.out.println(json);
model.addAttribute("roleId", roleId);
return "sysadmin/role/jRoleModule";
}
其中红色部分是将准备好的数据装换成一个JSON串。
蓝色部分为将其中有的属性进行选中。
二、页面中的设置
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
//这里相当于在拿后来传来的数据,后台在传数据的时候,属性名要对应上
var zNodes =${json}
$(document).ready(function(){
$.fn.zTree.init($("#htZtree"), setting, zNodes);
var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
zTreeObj.expandAll(true); //展开所有树节点
});
//获取到所以用户选中的节点id值
//获取所有选择的节点,提交时调用下面函数
function submitCheckedNodes(treeNode) {
var nodes = new Array();
var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
nodes = zTreeObj.getCheckedNodes(true); //取得选中的结点
var str = "";
for (i = 0; i < nodes.length; i++) {
if (str != "") {
str += ",";
}
str += nodes[i].id;
}
$('#moduleIds').val(str); //将拼接完成的字符串放入隐藏域,这样就可以通过post提交
}
<table id="ec_table" class="tableRegion" width="98%" >
<!--隐藏域用来传递数据 -->
<input type="hidden" id="roleId" name="roleId" value="${roleId}"/>
<input type="hidden" id="moduleIds" name="moduleIds"/>
<ul id="htZtree" class="ztree"></ul>
</table>
在页面处理中将其中提交的数据进行接收处理
@RequestMapping("saveRoleModule")
public String saveRoleModule(String roleId,String[] moduleIds){
roleService.saveRoleModule(roleId,moduleIds);
return "redirect:/sysadmin/role/list";
}