網頁需要引用的鏈接
<link rel="stylesheet" href="css/dataAnalysis/zTreeStyle.css?v=<%=version %>">
<script src="js/lib/jquery.ztree.core.js?v=<%=version %>"></script>
<script src="js/lib/jquery.ztree.excheck.js"></script>
html頁面元素
<html>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul> <!--要記得寫class="ztree"-->
</div>
</body>
</html>
javascript邏輯代碼
function initTree(dataList){
//配置
var setting = {
view: {
showLine: false, //設置 zTree 是否顯示節點之間的連線。
fontCss: { //字體樣式
"font-size": "14px !important",
height: "25px"
},
showIcon : false, //設置 zTree 是否顯示節點的圖標。
selectedMulti : true, //設置是否允許同時選中多個節點。
expandSpeed : 'fast', //節點展開、摺疊時的動畫速度
dblClickExpand : true //雙擊節點時，是否自動展開父節點的標識
},
check: {
enable: true, //true / false 分別表示 顯示 / 不顯示 複選框或單選框
autoCheckTrigger: true, //true / false 分別表示 觸發 / 不觸發 事件回調函數
chkStyle: "checkbox", //勾選框類型(checkbox 或 radio）
chkboxType:{ "Y": "ps", "N": "ps" } //勾選 checkbox 對於父子節點的關聯關係
},
data: {
simpleData: { //簡化數據格式
enable: true, //true / false 分別表示 使用 / 不使用 簡單數據模式
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
// callback : { //回調函數
// beforeClick : '',
// onCheck : ''
// }
};
var zNodes=[];
//調用函數，將接口返回的數據轉化爲ztree可以使用的簡單數據模式
ZNodesEach(dataList,0,0);
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
}
調用下方遞歸函數，處理數據：
/**
* 遞歸函數，將複雜數據處理成簡單數據模式
*/
function ZNodesEach(jsonA,PID,DIR){
for (var i=0;i<jsonA.length;i++){
var obj={};
if("name" in jsonA[i]){
obj.name=jsonA[i].name;
if(jsonA[i].pid ==0){
obj.isParent=true;
}else{
obj.isParent=false;
}
}
obj.pId=PID;
if(obj.pId==0){
DIR=0;
}
obj.dir=DIR;
obj.id=jsonA[i].id;
obj.open=true;
zNodes.push(obj);
if(jsonA[i].child!=''){
var Cdir=DIR+1;
var newNode=jsonA[i].child;
ZNodesEach(newNode,obj.id,Cdir);
}
}
}
簡單數據格式
//open:true 表示默認展開節點
var nodes = [
{id:1, pId:0, name: "父節點1"，open:true},
{id:11, pId:1, name: "子節點1",open:true},
{id:12, pId:1, name: "子節點2",open:true}
];
方法使用：
//1.設置ztree節點複選框選中
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node = zTree.getNodeByParam("id",1);
zTree.checkNode(node, true, true);
zTree.updateNode(node); //設置完之後要更新節點
//2.獲取ztree選中的節點
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
console.log(nodes);
注：使用ztree的api方法時，不同的api可能需要依賴不同的ztree插件，詳情請自行查閱ztree官網，官網地址：http://www.treejs.cn/v3/api.php