本文案例是三个树加载在一个页面上:
用ajax从前台获取数据:
//获取树数据 (后台获数据,并拼接成json,返回给前台) 【同时加载三个树
function getOrgList(){
$.post('/api/w/org/goaorglist/OrgFenfaFeileiGet',"", function(data) {
//获得数组
var result= eval("("+data+")");
//第一个树
var orgList= result.orgList;
//第二个树
var orgList1=result.orgList1;
//第三个树
var orgList2=result.orgList2;
//var list3= orgList1.concat(orgList2) 如果把两个树合并,可以这样(此处注释掉了,希望不要混淆)
});
}
setting参数数值(这个设置有很多,作用是多加载的树设置相关样式和功能,还有很大其他设置,可以百度参考):
var setting = {
check : {
enable : true
},
data: {
simpleData: {
enable: true, //设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式)
idKey: "id",//设置启用简单数据格式时id对应的属性名称
pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
}
},
view: {
showIcon: true,//设置 zTree 是否显示节点的图标。
selectedMulti : true, //可以多选
showLine : false, //设置是否显示节点与节点之间的连线
showTitle: true, //设置是否显示节点的title提示信息
fontCss: { fontSize: "14px" }
},
};
页面加载树(因为我的需求有三个树,所以加载三次,不要混淆)
$(document).ready(function () {
//上面的函数,从后端获取的数据
getOrgList();
//初始组织树状图
treeObj= $.fn.zTree.init($("#treeDemo"), setting, orgList)
treeObj1= $.fn.zTree.init($("#treeDemo1"), setting, orgList1);
treeObj2= $.fn.zTree.init($("#treeDemo2"), setting, orgList2);
$('ul.level0').css('display','block');
//让外层框里的值被选中
var treeeObj=$.fn.zTree.getZTreeObj("treeDemo");
var treeeObj1=$.fn.zT