WEB开发网
开发学院网页设计JavaScript 打造基于jQuery的高性能TreeView(上) 阅读

打造基于jQuery的高性能TreeView(上)

 2009-10-27 00:00:00 来源:WEB开发网   
核心提示:项目中经常会遇到树形数据的展现,包括导航,打造基于jQuery的高性能TreeView(上),选择等功能,所以树控件在大多项目中都是必须的,但是修改起来难度也较大),在这种情况下书会变形(Jquery.treeview)就有这种问题,那一个实用的树应该具备什么功能呢?根据我的项目实践情况,主要是几个关键点:1:支持静态

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

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

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

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

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

4:能够承载大数据量,并性能表现优异

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

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

先来看下效果图

打造基于jQuery的高性能TreeView(上)

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

那么我们要开工了;

1:第一个确定的节点Dom结构(即用什么样的HTML来构建节点)

比较土的是table套table的(样式上好控制,但是大数据量,和层次较深的树,这种结构肯定顶不住的)

还有一种是比较新鲜的UL套LI的方式,这是现下很多书采取的方式如Jquery.treeview就是采用的这种格式,好处比较明显就是结构简洁明了,

而且在不支持Js的浏览器上,同样也能呈现出树的形状(这种情况其实咱可以忽略),但是Jquery.treeview的节点在IE下,特别是IE6下无法被内部元素撑开,(IE7,8当达到一定深度时无法撑开),请奇怪的现象(我猜测是因为使用padding来做缩进,margin-left:负值来控制图标位置有关,但是修改起来难度也较大),在这种情况下书会变形(Jquery.treeview)就有这种问题,只能通过设置节点的width来解决。

1 2 3 4 5 6  下一页

Tags:打造 基于 jQuery

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接