插件使用效果

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

在需要的頁面中引入css，js.

　　<link rel="stylesheet" type="text/css" href="zTree_v3/demo.css" />
　　<link rel="stylesheet" type="text/css" href="zTree_v3/zTreeStyle.css"/>

　　<script type="text/javascript" src="zTree_v3/jquery.ztree.core.min.js"></script>

在HTML頁面中插件展示處

<div id="treeDemo" class="ztree"></div>

自定義內容

SCRIPT type="text/javascript">var setting = {data: {simpleData: {enable: true}},callback: {beforeClick: beforeClick,}};var zNodes =[{ id:1, pId:0, name:"普通的父節點", open:true},//open為true表示為展開狀態{ id:11, pId:1, name:"葉子節點 - 1",},{ id:12, pId:1, name:"葉子節點 - 2",},{ id:13, pId:1, name:"葉子節點 - 3",},{ id:2, pId:0, name:"NB的父節點",open:true},{ id:21, pId:2, name:"葉子節點2 - 1", click:false},{ id:22, pId:2, name:"葉子節點2 - 2", click:false},{ id:23, pId:2, name:"葉子節點2 - 3", click:false}
　　　　　　 ];

　　　　　　function beforeClick(treeId, treeNode, clickFlag) {//點擊節點獲取該節點信息

　　　　　　　　treeNode.getParentNode()//點擊節點的父節點參數

　　　　　　　　treeNode//判斷點擊節點的所有信息
　　　　　　　　return(treeNode.click != false);
　　　　　　}

$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});</SCRIPT>

?給選中節點添加標記

　　var zTree = $.fn.zTree.getZTreeObj("treeDemo");var node = zTree.getNodeByParam("id",1);//當前節點的idzTree.selectNode(node);

?

?插件下載http://pan.baidu.com/s/1eSJ7bpg

?

轉載于:https://www.cnblogs.com/luoshang/p/7510562.html

總結

以上是生活随笔為你收集整理的zTree插件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。