您的位置: 首页  >  IT文章  >  前端树形图 - zTree - jQuery 树插件的做法

前端树形图 - zTree - jQuery 树插件的做法

分类: IT文章 • 2022-10-15 00:09:55
前端树形图 -- zTree -- jQuery 树插件的做法

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

zTree 是开源免费的软件（MIT 许可证）。所以完全免费，可以随便使用，没有任何版权问题。

zTree文档

zTree插件的优点：

  1. zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
  2. 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
  3. 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器（亲测，IE8+, FireFox, Chrome都可以正常使用）
  4. 支持 JSON 数据
  5. 支持静态 和 Ajax 异步加载节点数据（Ajax异步加载可以使插件的初始化速度更快，同时减少流量）
  6. 支持任意更换皮肤 / 自定义图标（依靠css）
  7. 支持极其灵活的 checkbox 或 radio 选择功能
  8. 提供多种事件响应回调 （可以让你的树更灵活）
  9. 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
  10. 在一个页面内可同时生成多个 Tree 实例
  11. 简单的参数配置实现 灵活多变的功能
同时，zTree的文档也已经很强大，而且应该是中国人开发的，所以提供中文文档，还提供了中文论坛的讨论区，包括百度贴吧也会有人常驻回答问题，这样就更近一步的让你对这个插件的使用更容易，获取资料更容易。
 
这里就讲一下zTree的最基本应用。
 
首先，zTree必须的就是数据，zTree可以接受两种数据，
一种是默认的数据类型：（这一种，所有的数据结构层级都显示在上面）
  1. zTreeNodes =[
  2. {"name":"网站导航", open:true, children:[
  3. {"name":"google","url":"http://g.cn","target":"_blank"},
  4. {"name":"baidu","url":"http://baidu.com","target":"_blank"},
  5. {"name":"sina","url":"http://www.sina.com.cn","target":"_blank"}
  6. ]
  7. }
  8. ];
 

还有一种是使用simpleData：（这里面主要根据id，isParent和pId来进行层级判断，我个人一直在使用这个形式，对于处理数据来说，这里对后台处理起来比较方便）

  1. [{"id":1357,"name":"山东省","isParent":true,"pId":0},
  2. {"id":1358,"name":"济南市","isParent":true,"pId":1357}]
 

 

其次，我们就需要添加对应的js和css库，jQuery也是必须的：

  1. <linkrel="stylesheet"type="text/css"href="http://cdn.gbtags.com/ztree/3.5/zTreeStyle.css">
  2. <scripttype="text/javascript"src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>
  3. <scripttype="text/javascript"src="http://cdn.gbtags.com/ztree/3.5/jquery.ztree.all-3.5.min.js"></script>
 

然后，一切就很简单，在HTML加入一个zTree的ul，class必须是zTree，必须有Id（用于以后获取zTree的对象）

  1. <ulclass="ztree"id="ztree"></ul>

 最后，我们需要在js中写显示的setting，然后用初始化方法，对tree进行初始化

  1. var checkSetting ={
  2. check:{
  3. enable:true,// 默认使用checkBox形式
  4. chkboxType:{"Y":"ps","N":"ps"}
  5. },
  6. data:{
  7. simpleData:{
  8. enable:true// 使用simpleData
  9. }
  10. },
  11. view:{
  12. nameIsHTML:true// 如果name中需要有html处理的话，那么把这个设为true。我一般开着，更灵活一点
  13. }
  14. };
  15. $.fn.zTree.init($("#ztree"), checkSetting, data);
 

 这样子一个tree就能显示出来啦。

更多完整内容参见：http://www.gbtags.com/gb/share/5716.htm

相关推荐