一、Ztree的基本樣式
阿新 • • 發佈:2019-02-13
//var zTreeObj;
var setting = {
view:{
//是否顯示連線線
showLine:false,
//是否顯示節點圖示(預設為true)
showIcon:true
},
data:{
//是否套用簡單資料格式,自動生成結構圖
simpleData:{
//開啟簡單資料
enable:true,
//節點id
idKey:"id",
//父節點
pIdKey:"pId",
//根節點
rootPId:0
}
}
};
//構成節點的資料
/**
* 知識點:
* 自定義圖示:iconOpen、iconClose、icon:設定節點開啟、關閉的圖示,和葉子節點的圖示
* 超連結:url、target、click(簡單點選事件,複雜事件,使用onclick事件回撥函式)
*/
var zNodes = [
{"id":1,"pId":0,"name":"test1", "open":true, iconOpen:"css/zTreeStyle/img/diy/1_open.png", iconClose:"css/zTreeStyle/img/diy/1_close.png"},
{"id":2,"pId":1,"name":"test1-1", icon:"css/zTreeStyle/img/diy/2.png", url:"", target:"_blank", click:"alert('我是不會跳轉的...');"},
{"id" :3,"pId":1,"name":"test1-1", url:"http://www.treejs.cn/", target:"_blank"},
{"id":4,"pId":0,"name":"test2", "open":true},
{"id":5,"pId":4,"name":"test2-1"},
{"id":6,"pId":4,"name":"test2-2"},
{"id":7,"pId":6,"name":"test2-2-1"},
{"id":8,"pId":6,"name":"test2-2-2", "isParent":true},
];
$(document).ready(function(){
//初始化
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});