zTree：JQuery树形插件使用示例

最新推荐文章于 2025-05-15 09:47:40 发布

原创最新推荐文章于 2025-05-15 09:47:40 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用zTree插件创建树形结构，并演示了如何配置设置、定义节点数据及初始化zTree。此外，还提供了修改图标的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个Web平台，其中想用一个树形展示。上网搜了搜基于JQuery的树形插件还真不少，最后选定zTree。关于zTree这里只是简单给出一个使用的示例。

首先声明zTree的配置信息，然后声明zTree的节点信息，最后初始化zTree。

下面给出一个示例：

[html]view plaincopyprint? 
   
 <!DOCTYPE HTML>  
 <html>  
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
     <title>zTree Deom</title>  
     <link rel="stylesheet" type="text/css" href="css/zTreeStyle.css">  
     <link rel="stylesheet" type="text/css" href="css/style.css">  
     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>  
     <script type="text/javascript" src="js/jquery.ztree.all-3.5.min.js"></script>  
     <script type="text/javascript">  
         $(document).ready(function() {  
             //配置zTree  
             var setting = {  
                 view: {  
                     showLine: false,  
                     expandSpeed: "slow"  
                 }  
             };  
             //zTree节点数据  
             var treeNodes = [  
                 {  
                     name: "手机",  
                     children: [  
                         {  
                             name: "诺基亚",  
                             children: [  
                                 {name: "Lumia"},  
                                 {name: "NokiaX"},  
                                 {name: "Asha"},  
                             ]  
                         },  
                         {name: "三星"},  
                         {name: "索爱"},  
                         {name: "华为"}  
                     ]  
                 },  
                 {  
                     name: "电脑",  
                     children: [  
                         {name: "联想"},  
                         {name: "惠普"},  
                         {name: "华硕"},  
                         {name: "宏碁"}  
                     ]  
                 }  
             ];  
             //初始化zTree  
             var tree = $("#tree");  
             tree = $.fn.zTree.init(tree, setting, treeNodes);  
         });  
     </script>  
 </head>  
 <body>  
     <div style="margin: 0 auto">  
         <ul id="tree" class="ztree"></ul>  
     </div>  
 </body>  
 </html>  