jquery tree的使用

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_30563917

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量231

点赞数

文章标签： javascript 大数据 ViewUI

原文链接：http://www.cnblogs.com/hongwei8455/p/3755520.html

版权

项目中经常会遇到树形数据的展现，包括导航，选择等功能，所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢？

根据我的项目实践情况，主要是几个关键点：

1：支持静态的树，即一次性将全部数据加载到客户端。

2：异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。

3：Checkbox树（可能是静态树也可能是异步树），用于选择（如选择组织机构，选择数据字典项）等，最好是能够支持节点级联（这个是难点）

4：能够承载大数据量，并性能表现优异

5：能够在主流浏览器中运行良好

那我要打造的TreeView就是为了实现这个5个主要指标的。

先来看下效果图

上图是中国行政区域的数据树，总共得节点是3500+。

那么我们要开工了；

1：第一个确定的节点Dom结构（即用什么样的HTML来构建节点）

比较土的是table套table的（样式上好控制,但是大数据量，和层次较深的树，这种结构肯定顶不住的）
还有一种是比较新鲜的UL套LI的方式，这是现下很多书采取的方式如Jquery.treeview就是采用的这种格式，好处比较明显就是结构简洁明了，
而且在不支持Js的浏览器上，同样也能呈现出树的形状（这种情况其实咱可以忽略），但是Jquery.treeview的节点在IE下，特别是IE6下无法被内部元素撑开，（IE7，8当达到一定深度时无法撑开），请奇怪的现象（我猜测是因为使用padding来做缩进，margin-left：负值来控制图标位置有关，但是修改起来难度也较大），在这种情况下书会变形（Jquery.treeview）就有这种问题，只能通过设置节点的width来解决。

JQuery.treeview的节点结构

Jquery.TreeView IE6 下展开第三级即出现错位

IE8下展开到第5级

而我采用的也是第二种方式，但是缩进采用了填空的方式，即缩进的位置用空白的图片填充来避免Jquery.treeview的问题

我的树节点结构

确定了节点的HTML我们就可以来写CSS了。有了效果图，有个节点结构接着就编写CSS了

下面是CSS的完整代码

上面了树的基本样式外，定义了一个有+号带line的样式和+号不带line的样式

这就是那个+号带line的样式

转载于:https://www.cnblogs.com/hongwei8455/p/3755520.html

关注