html 部分:
<div class="tree-content" id="menuContent">
<ul class="ztree pcc-tree" id="positionTree"></ul>
</div>
其中要记得给ul一个css(ztree)。这样ztree基础的样式就出来了.
2 js部分
function ztreeData() {
var zTreeObj;
var setting = {
check:{
chkStyle:"radio",
enable:true,
radioType:"all",
},
data:{
key:{
children:"nodes",
name:"text",
}
},
callback: {
onClick: function(e,treeId,treeNode){
zTreeObj.checkNode(treeNode,!treeNode.checked,true);
}
}
};
var zNodes =[
]
$.get({
async: false,
url:ztreeUrl,
dataType: "json",
success:function(res){
zNodes=res.data;
zTreeObj = $.fn.zTree.init($("#positionTree"), setting, zNodes);
}
})
};
这样通过标准的数据请求就可以出来了,如果后台给的数据不是标准的数据格式(名字不一样时需要配置一下)
例如 data:[
{text:"北京市",nodes:{text:"朝阳区"},id:1},
{text:"湖北省",nodes:{text:"武汉市"},id:2},
]
这样的数据格式无法拿来直接使用需要在setting里面配置一下
function ztreeData() {
var zTreeObj;
var setting = {
view:{
fontCss:{color:'blue'} //设置点击样式
},
data:{
key:{
children:"nodes", //设置子节点数据名称
name:"text", //设置节点名称
}
},
callback: {
onClick: zTreeOnClick,//设置点击节点事件
}
};
var zNodes =[
]
$.get({
async: false,
url: ajaxUrl.getLocationTree,
dataType: "json",
success:function(res){
zNodes=res.data;
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
})
};