基于jQuery ztree实现表格风格的树状结构

前端之家收集整理的这篇文章主要介绍了基于jQuery ztree实现表格风格的树状结构前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

zTree 简介

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

zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。

  • zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
  • 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
  • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
  • 支持 JSON 数据
  • 支持静态 和 Ajax 异步加载节点数据
  • 支持任意更换皮肤 / 自定义图标(依靠css)
  • 支持极其灵活的 checkBox 或 radio 选择功能
  • 提供多种事件响应回调
  • 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
  • 在一个页面内可同时生成多个 Tree 实例
  • 简单的参数配置实现 灵活多变的功能

先来一张完成图:

这里写图片描述

原理很简单:利用zTree的addDiyDom方法自定义每个DOM节点,在原来的节点后面加一些div,再利用css样式使它看起来像个表格。

这里写图片描述

zTree官方api: http://www.treejs.cn/v3/api.php

下面是完整代码(更新于2017-7-30 08:56 )

demo.html:

<Meta charset="UTF-8"> Demo by dq <Meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9;IE=8;"/> nofollow" rel="stylesheet">

总结

以上所述是小编给大家介绍的基于jQuery ztree实现表格风格的树状结构。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章