jQuery zTree树插件的使用教程

  • 时间:
  • 浏览:28

本文为各人分享了jQuery zTree树插件的利用教程,供各人参考,详细内容以下

1、引见

zTree 是1个依托 jQuery 真现的多功用 “树插件”。优良的机能、灵敏的设置装备摆设、多种功用的组开是 zTree 最年夜长处。

民网地点

特性:

  • zTree v3.0 将中心代码依照功用停止了朋分,没有需求的代码能够不消减载
  • 采取了 提早减载 手艺,上万节面沉紧减载,即便正在 IE6 下也能根本做到秒杀
  • 兼容 IE、FireFox、Chrome、Opera、Safari 等阅读器
  • 撑持 JSON 数据
  • 撑持静态 战 Ajax 同步减载节面数据
  • 撑持肆意改换皮肤 / 自界说图标(依托css)
  • 撑持极为灵敏的 checkbox 或 radio 挑选功用
  • 供给多种事务呼应回调
  • 灵敏的编纂(删/删/改/查)功用,可随便拖拽节面,借能够多节面拖拽哟
  • 正在1个页里内可同时死成多个 Tree 真例
  • 简朴的参数设置装备摆设真现 灵敏多变的功用

2、利用

(1)引进ztree组件

留意:需求增加jquery依靠



(2)背body中增加div

(3)增加ztree设置

(4)页里结果

(5)项目截图及html代码

html页里




  
    
    ztree测试页里
    
    
    
  

  
    

3、1些办法

(1)设置睁开树

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

        //睁开以是节面
        //zTreeObj.expandAll(true);

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

4、setting 设置装备摆设详解

1些比力经常使用的设置装备摆设

(1)check

1、enable: true  
设置 zTree 的节面上是不是显现 checkbox / radio
默许值: false

(2)view

 selectedMulti: false 设置是不是许可同时选中多个节面。默许是true

(3)data

***Data: { 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" }
        ];

结果:

以上便是本文的全数内容,期望对各人的进修有所帮忙,也期望各人多多撑持剧本之家。