Ztree使用入门

最新推荐文章于 2024-01-25 12:00:00 发布

伏特加的滋味

最新推荐文章于 2024-01-25 12:00:00 发布

阅读量619

点赞数

分类专栏： javaScript/jquery

本文链接：https://blog.csdn.net/yuanyuan214365/article/details/64443309

版权

javaScript/jquery 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

目的及实现结果：建立一个简单的tree树

需要引入的 js 包有：TreeStyle.css，jquery-1.4.4.min.js，jquery.ztree.core-3.5.js，jquery.ztree.excheck-3.5.js

ztree建立树级结构：使用其ztree的初始化方法：$.fn.zTree.init( $(" 区域") , setting ,treenode ),重点就是这三个参数的配置

参数说明：setting：用于设置ztree的属性； treenode 用于设置节点具体可以参考：ZtreeAPI 文档：http://www.treejs.cn/v3/api.php

其中遇到的问题：其中css样式，img图片引入，再设计谁checkbox的使用

整体程序：

<!DOCTYPE html>
<html>
<head>
     <title>Ztree实例</title>
     <meta charset="UTF-8">
    <link rel="stylesheet" href="zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
    <script type="text/javascript" src="jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="jquery.ztree.excheck-3.5.js"></script>
</head>
<body>
     <div>
     	<ul id="tree" class="ztree"></ul>
     </div>
     <script>
     	var setting = { 
        isSimpleData : true,              //数据是否采用简单 Array，默认false  
        treeNodeKey : "id",               //isSimpleData格式下，当前节点id属性  
        treeNodeParentKey : "pId",        //isSimpleData格式下，当前节点的父节点id属性  
        showLine : true,                  //是否显示节点间的连线 
        check:{
            enable:true
          }          //每个节点上是否显示 CheckBox  
        }; 

        var treeNodes = [   
        {"id":1,"pId":0,"name":"test1",open:true,children:[{"name":"test1-1","id":11},{"name":"test1-2","id":12}]},   
        {"id":2, "name":"test2",open:true,children:[{"name":"test2-1","id":21},{"name":"test2-2","id":22}]},   
        {"id":3, "name":"test3",open:true,children:[{"name":"test3-1","id":31},{"name":"test3-2","id":32}]},   
        {"id":4, "name":"test4",open:true,children:[{"name":"test4-1","id":41},{"name":"test3-2","id":42}]},   
        ]
        var zTree;  
         $(function() {  
         	 $.fn.zTree.init(
                  $("#tree"),
                  setting,
                  treeNodes
         	 	)
          }); 
     </script>
</body>
</html>

结果显示：

伏特加的滋味

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ztree使用入门

目的及实现结果：建立一个简单的tree树需要引入的 js 包有：TreeStyle.css，jquery-1.4.4.min.js，jquery.ztree.core-3.5.js，jquery.ztree.excheck-3.5.jsztree建立树级结构：使用其ztree的初始化方法：$.fn.zTree.init( $() , setting ,treenode ),重点就是这三个
复制链接

扫一扫