亲宝软件园·资讯

展开

jQuery zTree树插件的使用教程

人气:0

本文为大家分享了jQuery zTree树插件的使用教程,供大家参考,具体内容如下

一、介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官网地址

特点:

二、使用

(1)引入ztree组件

注意:需要添加jquery依赖

<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>

(2)向body中添加div

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

(3)添加ztree设置

<SCRIPT LANGUAGE="JavaScript">
    var zTreeObj;
    // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
    var setting = {};
    // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
   var zNodes = [{
       name: "test1",
       open: true,
       children: [
        { name: "test1_1" }, { name: "test1_2" }
         ]
       },
      {
        name: "test2",
        open: true,
        children: [
         { name: "test2_1" }, { name: "test2_2" }
        ]
      }
    ];
  $(document).ready(function() {
  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 zTreeObj.expandAll(true);//展开树
</SCRIPT>

(4)页面效果

(5)项目截图及html代码

html页面

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>ztree测试页面</title>
    <link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
    <script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div>
      <div id="treeDemo" class="ztree">
      </div>
    </div>
    <SCRIPT LANGUAGE="JavaScript">
      var zTreeObj;
      // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
      var setting = {};
      // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
      var zNodes = [{
          name: "test1",
          open: true,
          children: [
            { name: "test1_1" }, { name: "test1_2" }
          ]
        },
        {
          name: "test2",
          open: true,
          children: [
            { name: "test2_1" }, { name: "test2_2" }
          ]
        }
      ];
      $(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });
    </SCRIPT>
  </body>

</html>

三、一些方法

(1)设置展开树

$(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);

        //展开所以节点
        //zTreeObj.expandAll(true);

        //展开第一级数节点
        var nodes = zTreeObj.getNodesByParam("level", 0);
        for(var i = 0; i < nodes.length; i++) {
          zTreeObj.expandNode(nodes[i], true, false, false);
        }
      });

四、setting 配置详解

一些比较常用的配置

(一)check

1、enable: true  
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false

(二)view

 selectedMulti: false 设置是否允许同时选中多个节点。默认是true

(三)data

simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }

 var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
          { "id": 11, "pid": 1, "name": "test11" },
          { "id": 12, "pid": 1, "name": "test12" },
          { "id": 111, "pid": 11, "name": "test111" }
        ];

效果:

您可能感兴趣的文章:

加载全部内容

相关教程
猜你喜欢
用户评论