zTree树形结构的解析原理

一、后台封装数组数据

json = new JSONObject();

JSONArray array = new JSONArray();

try{
tbSysPersonMenuList = tbSysPersonMenuBo.getAll();
List<TbSysPersonRole> tbSysPersonRoleList = tbSysPersonRoleBo.getByRoleNo(roleNo);
for(int i=0; i<tbSysPersonMenuList.size();i++){
JSONObject obj = new JSONObject();
obj.put("name", tbSysPersonMenuList.get(i).getMenuName());
obj.put("id", tbSysPersonMenuList.get(i).getMenuId());
obj.put("pId", tbSysPersonMenuList.get(i).getMenuId());
for(TbSysPersonRole role : tbSysPersonRoleList){
if(role.getMenuId().equals(tbSysPersonMenuList.get(i).getMenuId())){
obj.put("checked", true);
break;
}else{
obj.put("checked", false);
}
}
array.add(obj);
}
json.put("roleNo", roleNo);
json.put("menuData", array);

dataMap.put("json", json);

二、前台接收到相应的json数组

$.ajax({
type:"post",
url:"TbSysPersonMenuActionAjax_configureAjax.action",
dataType:"json",
data:{
roleNo:'<s:property value="roleNo"/>'
},
async:false,
cache:false,
success:function(jsonData){
if(jsonData.flag=="success"){
dataMap = jsonData.json;
var menu_zNodes = dataMap.menuData;
var viewTreeObj = $.fn.zTree.init($("#personalCenterData"), menu_setting, menu_zNodes);
viewTreeObj.expandAll(true);
viewTreeObj.expandAll(false);
var bodyHeight = document.body.clientHeight-110;
$(".pms_configure_tree").height(bodyHeight);
$(".pms_configure_tree").each(function(i,obj){
$(obj).fadeIn(2000,function(){
$(obj).parents(".pms_configure_sub").find(".loading").remove();
});
});
}else{
window.top.alert(jsonData.msg,0);
}
}
});

}

三、通过$.fn.zTree.init 组件来自动加载解析成树形结构

var menu_setting = {
data : {
simpleData : {
enable : true
}
},
view: {
addDiyDom: addMenuDom,
showLine: false
}

};

四、通过addMenuDom方法解析

function addMenuDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
var checked4 = "";
if(treeNode.checked){
checked4 = "checked";

}

treeNode 就是树的节点信息

zTree树形结构的解析原理

treeNode节点包含的相应的方法以及封装的字段