jquery ztree 使用教程

最新推荐文章于 2025-06-10 09:02:43 发布

转载最新推荐文章于 2025-06-10 09:02:43 发布 · 776 阅读

文章标签：

#jquery

WEB前端专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍如何使用zTree插件创建动态树形结构。从下载插件到页面引入，再到编写JS脚本来设定树形结构属性及加载文件，一步步引导读者掌握zTree的基本用法。

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

最近在做宿舍管理系统小型项目，在进行用户角色设定、角色资源（菜单）设定的时候，需要使用树行结构进行动态设置。使用到jquery树形结构插件zTree。整理一下入门级的使用zTree的方法。

1、通过官网下载demo或者下载zTree相关的插件；

官网地址：zTree官网

2、页面文件引入需要的zTree插件：

主要引入的对象有：zTreeStyle.css、 jquery-1.4.4.min.js、 jquery.ztree.all.js。

引入示例：


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

   
    
   
   
      
     <script type="text/javascript" src="jquery-1.4.4.min.js">
     
     </script>
    
   

   
    
   
   
      
     <script type="text/javascript" src="jquery.ztree.all.js">
     
     </script>

3、编写js脚本，设定树形结构的一些属性值以及加载文件位置：

页面内容：


 
   
    
   
   
    
     <BODY>
    
   

   
    
   
   
    
     <div>
    
   

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

   
    
   
   
    
     </div>
    
   

   
    
   
   
    
     </BODY>

js脚本文件：


 
   
    
   
   
     
     <SCRIPT LANGUAGE="JavaScript">
     
    
   

   
    
   
   
        
     //js方法
    
   

   
    
   
   
    	
     function test(event, treeId, treeNode){
    
   

   
    
   
   
    
     		 alert(treeNode.tId + 
     ", " + treeNode.name + 
     "," + treeNode.checked);
    
   

   
    
   
   
    
     	}
    
   

   
    
   
   
    	
    
   

   
    
   
   
       
     // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    
   

   
    
   
   
       
     var setting = {
    
   

   
    
   
   
    	
     check:{
    
   

   
    
   
   
    		
     enable: 
     true,
    
   

   
    
   
   
    		
     autoCheckTrigger:
     true,
    
   

   
    
   
   
    		
     chkStyle:
     "checkbox"
    
   

   
    
   
   
    
     	},
    
   

   
    
   
   
    	
     callback:{
    
   

   
    
   
   
    		
     onCheck:test
    
   

   
    
   
   
    
     	}
    
   

   
    
   
   
    
        };
    
   

   
    
   
   
       
     // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    
   

   
    
   
   
       
     var zNodes = [
    
   

   
    
   
   
    
        {
     name:
     "test1", 
     open:
     true,
     "checked":
     "true", 
     children:[
    
   

   
    
   
   
    
           {
     name:
     "test1_1",
     "checked":
     "true"}, {
     name:
     "test1_2"}]},
    
   

   
    
   
   
    
        {
     name:
     "test2", 
     open:
     true, 
     children:[
    
   

   
    
   
   
    
           {
     name:
     "test2_1"}, {
     name:
     "test2_2"}]}
    
   

   
    
   
   
    
        ];
    
   

   
    
   
   
    
        $(
     document).ready(
     function(){
    
   

   
    
   
   
         
     //页面加载成功后,开始加载树形结构
    
   

   
    
   
   
    
        $.fn.zTree.init($(
     "#treeDemo"), setting, zNodes);
    
   

   
    
   
   
    
        });
    
   

   
    
   
   
      
     </SCRIPT>

至此,一个完整的树形结构完成,如果需要对树进行其他操作可以参考官网API文档.

运行结果如下:

![在这里插入图片描述](https://img-blog.youkuaiyun.com/20161116150539152?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)