构建基于jQuery的高性能树形视图

根据我的项目实践，有几个要点：1。支持静态树，即一次将所有数据加载到客户端。2:异步树，即一次只加载一个或几个节点，子节点可以异步加载数据。3.复选框树(静态树或异步树)用于选择(如选择组织和数据字典项目)等。最好支持节点级联(这是一个难点)。4.它能承载大量数据，性能优异。5.它可以在主流浏览器中很好地运行，所以我想构建的TreeView就是为了实现这五个主要指标。我们来看看效果图。

上图为中国行政区域的数据树，共有3500个节点。然后我们必须开始工作；1.第一个确定的节点Dom结构(也就是用什么样的HTML来构建节点)比较土，但是风格容易控制，但是数据量大，有深层次的树，这个结构肯定撑不住。UL还有一种比较新鲜的设置LI的方式，目前很多书都采用了，比如Jquery.treeview就采用了这种格式。明显的优点是结构简洁明了，在不支持Js的浏览器上也可以呈现树形(这种情况可以忽略)，但是Jquery.treeview的节点在IE下是不能被内部元素打开的，特别是在IE6下，(IE7，8达到一定深度是不能打开的)，请问奇怪的现象(我猜是因为缩进用了填充吧。左边距：负值控制图标位置，但很难修改。)在这种情况下，书会变形(Jquery.treeview)，这是一个只能通过设置节点宽度来解决的问题。

JQuery.treeview的节点结构

在Jquery下。TreeView IE6，第三关会走位。

在E8中，有一些方法可以通过div扩展到5级。这是CSDN导航树的方式，是一种折中的方法(节点不太复杂，CSS容易写)，如下图。

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

我的树节点结构决定了节点的HTML，所以我们可以写CSS。有了渲染，就有了节点结构，然后再写CSS。以下是CSS的完整代码。复制代码如下： ie . bbit-tree . bbit-tree-bwrap { }。bbit-treeul，bbit-treeli { list-style-type 3360 none；margin:0pxpadding:0px} .bbit-tree-body { font-size :12 px；} .bbit-树图标，bbit-tree-ec-icon，bbit-树-节点-cb，bbit-树-肘-线，树肘。bbit-树-肘-端。bbit-树-肘-加，bbit-树-肘-负，bbit-tree-肘-end-plus，bbit-tree-肘关节-end-减{ border: 0 none高度： 18px；margin : 0；padd : 0；垂直对齐：顶部；宽度： 16px；背景-重复：不重复；} .bbit-tree-node-CB { height :16 px；} .bbit-树-节点-折叠。bbit-树-节点-图标，bbit-树-节点-展开。bbit-树-节点-图标，bbit-树节点-叶。bbit-树-节点-图标{ border: 0 none高度： 18px；margin : 0；padd : 0；垂直对齐：顶部；宽度： 16px；背景-位置：中心；背景-重复：不重复；} .ie。bbit-树-节点-缩进img，ie。bbit-树节点