當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

zTree插件使用

發(fā)布時間：2025/4/16 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 zTree插件使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

插件使用效果

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

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

在HTML頁面中插件展示處

自定義內(nèi)容

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

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

　　　　　　　　treeNode.getParentNode()//點擊節(jié)點的父節(jié)點參數(shù)

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

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

?給選中節(jié)點添加標記

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/luoshang/p/7510562.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

插件
ztree