成都网站建设设计

将想法与焦点和您一起共享

怎么在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 实例

  • 简单的参数配置实现 灵活多变的功能

先来一张完成图:

怎么在jQuery中素ztree实现表格风格的树状结构

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

怎么在jQuery中素ztree实现表格风格的树状结构 

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

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

demo.html:




  
  Demo by dq
  
  
  
  
  




  
    
    
  

关于怎么在jQuery中素ztree实现表格风格的树状结构就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前标题:怎么在jQuery中素ztree实现表格风格的树状结构
网站路径:http://chengdu.cdxwcx.cn/article/pppgdj.html

其他资讯