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

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

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级

• 还有一些是div套table的方式，CSDN的导航树就是这种，是种折中的方法（节点也不算太复杂，而且CSS也比较好写），如下图所示
  

 

 

 

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

我的树节点结构

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

下面是CSS的完整代码

.ie .bbit-tree .bbit-tree-bwrap{

}
.bbit-tree ul,.bbit-tree li
{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.bbit-tree-body
{
     font-size:12px;
}
.bbit-tree-icon, .bbit-tree-ec-icon, .bbit-tree-node-cb,.bbit-tree-elbow-line, .bbit-tree-elbow, .bbit-tree-elbow-end, .bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{
    border: 0 none;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
    background-repeat: no-repeat;
}
 .bbit-tree-node-cb
 {
     height:16px;
 }
.bbit-tree-node-collapsed .bbit-tree-node-icon, .bbit-tree-node-expanded .bbit-tree-node-icon, .bbit-tree-node-leaf .bbit-tree-node-icon{
    border: 0 none;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
    background-position:center;
    background-repeat: no-repeat;
}

.ie .bbit-tree-node-indent img, .ie .bbit-tree-node-icon, .ie .bbit-tree-ec-icon {
    vertical-align:middle !important;
}

.bbit-tree-noicon .bbit-tree-node-icon{
    width:0; height:0;
}

/* No line styles 没有线的样式 */
.bbit-tree-no-lines .bbit-tree-elbow{
    background:transparent;
}

.bbit-tree-no-lines .bbit-tree-elbow-end{
    background:transparent;
}

.bbit-tree-no-lines .bbit-tree-elbow-line{
    background:transparent;
}

/* Arrows Vista系统树的样式只有箭头*/
.bbit-tree-arrows .bbit-tree-elbow{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-elbow-plus{
    background:transparent no-repeat 0 0;
}

.bbit-tree-arrows .bbit-tree-elbow-minus{
    background:transparent no-repeat -16px 0;
}

.bbit-tree-arrows .bbit-tree-elbow-end{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-elbow-end-plus{
    background:transparent no-repeat 0 0;
}

.bbit-tree-arrows .bbit-tree-elbow-end-minus{
    background:transparent no-repeat -16px 0;
}

.bbit-tree-arrows .bbit-tree-elbow-line{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-plus{
    background-position:-32px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-minus{
    background-position:-48px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-plus{
    background-position:-32px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-minus{
    background-position:-48px 0;
}

.bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{
    cursor:pointer;
}

.ie ul.bbit-tree-node-ct{
    font-size:0;
    line-height:0;
    zoom:1;
}

.bbit-tree-node{
    white-space: nowrap;
}

.bbit-tree-node-el {
    line-height:18px;
    cursor:default;
   /* cursor:pointer;*/
}

.bbit-tree-node a{
    text-decoration:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:ignore;
    -kthml-user-focus:normal;
    -moz-user-focus:normal;
    -moz-outline: 0 none;
    outline:0 none;
}

.bbit-tree-node a span{
    text-decoration:none;
    padding:1px 3px 1px 2px;
}

.bbit-tree-node .bbit-tree-node-disabled .bbit-tree-node-icon{
   -moz-opacity: 0.5;
   opacity:.5;
   filter: alpha(opacity=50);
}

.bbit-tree-node .bbit-tree-node-inline-icon{
    background:transparent;
}

.bbit-tree-node a:hover{
    text-decoration:none;
}



/* Fix for ie rootVisible:false issue，修正一个IEdebug */
.bbit-tree-root {
    zoom:1;
}


/***********这里是图标了，可以在这里替换哦*****************/
.bbit-tree-node-expanded .bbit-tree-node-icon{
    background-image:url(images/tree/folder-open.gif);
}

.bbit-tree-node-leaf .bbit-tree-node-icon{
    background-image:url(images/tree/leaf.gif);
}

.bbit-tree-node-collapsed .bbit-tree-node-icon{
    background-image:url(images/tree/folder.gif);
}

.bbit-tree-node-loading .bbit-tree-node-icon{
    background-image:url(images/tree/loading.gif) !important;
}

.bbit-tree-node .bbit-tree-node-inline-icon {
    background-image: none;
}

.bbit-tree-node-loading a span{
     font-style. italic;
     color:#444444;
}

.bbit-tree-lines .bbit-tree-elbow{
    background-image:url(images/tree/elbow.gif);
}

.bbit-tree-lines .bbit-tree-elbow-plus{
    background-image:url(images/tree/elbow-plus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-minus{
    background-image:url(images/tree/elbow-minus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end{
    background-image:url(images/tree/elbow-end.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end-plus{
    background-image:url(images/tree/elbow-end-plus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end-minus{
    background-image:url(images/tree/elbow-end-minus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-line{
    background-image:url(images/tree/elbow-line.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-plus{
    background-image:url(images/tree/elbow-plus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-minus{
    background-image:url(images/tree/elbow-minus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-end-plus{
    background-image:url(images/tree/elbow-end-plus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-end-minus{
    background-image:url(images/tree/elbow-end-minus-nl.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-plus{
    background-image:url(images/tree/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-minus{
    background-image:url(images/tree/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-end-plus{
    background-image:url(images/tree/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-end-minus{
    background-image:url(images/tree/arrows.gif);
}

/*TreeNode 选中的Disabled的一些颜色，字体样式*/
.bbit-tree-node{
    color:#000;
    font: normal 11px arial, tahoma, helvetica, sans-serif;
}

.bbit-tree-node a{
    color:#000;
}
.bbit-tree-node a span{
    color:#000;
}
.bbit-tree-node .bbit-tree-node-disabled a span{
    color:gray !important;
}
.bbit-tree-node .bbit-tree-node-over {
    background-color: #eee;
}

.bbit-tree-node .bbit-tree-selected {
    background-color: #d9e8fb;
}

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

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

css中所用到的所有图片

2：确定数据结构

 

 

这样的结构有个好处就数据本身是带层次的，非常利于遍历，在后面的级联关联中会看到

3： 面子做好了那就开始做里子了，编写脚本（Javascript）

我是JQuery得拥护者，所以自然js的框架自然是采用Jquery了

先上个完整代码，再逐一分析

 

第一步：自然是所有Jquery的控件的第一步都是搭这个架子，兼容JQuery和$避免闭包，避免和其他类库冲突，接受一个参数（是个对象）

那第二步：给控件加一些参数默认参数，同时能调用方法$.extend让最终调用时的参数覆盖默认的（如果没有则使用默认） 第三步：生成默认数据的HTML（根据我们的分析节点的Dom结构，数据的数据结构，生成节点那是非常的简单），，添加到当前容器中。最后是注册事件这里有一个非常重要的地方，即懒加载(没有展开的节点HTML是不生成的)，这就要求我们在树内部要维护一套数据（开销很小），对于性能的提升那是相当的明显。另外一个重要的地方，就是使用一次生成所有展开节点的HTML并通过innerHTML属性来生成Dom，而不是通过append操作，因为直接操作innerHTML比通过dom原生的方法要快上N倍（节点越多，N越大），切记切记！ 在节点生成过程中，同时可生产节点的Path（节点路径），方便检索 注册事件，接受参数parent，即从某一父节点开始附加事件（因为做了个hover效果，所以事件是在每个节点上，如果取消该效果，事件可直接附加Tree上通过Event的srcElement来分发可略提升性能） 这里最主要的还是node的click事件，因为他要处理的事情很多，如树的展开收缩（如果子节点不存在，但是hasChildren为真，同时complete属性不为真则需要异步加载子节点，如子节点存在，但是没有Render那么就要Render）,点击checkbox要出发级联的事件和oncheckbox事件，点击其他则触发配置条件的nodeonclick事件，这一切都通过前面event的源元素的class来区分点击的对象

展开节点，异步请求的部分代码应该不是很复杂就不细诉了，关键来讲一下级联
级联有两个问题要处理，第一个是遍历子节点，第二个是上溯到祖节点，因为我们的数据结构这两个操作都显得非常简单

找到节点的同时都会触发check这个回调函数，来判断当前节点的状态，详细请看下面代码中的注释部分应该是比较清晰，描写了这个过程

至此我们树的主体功能已经完全实现了。其他就是公开一些方法等，大家可详见代码，示例中公开了两个一个当前选中的所有节点，另外一个当前的节点。 

大家可以通过以下网址查看文中的示例，selected拼错了，大家海涵！ windows azure部署还是麻烦懒得修改了3500+节点一次加载，大家可以点击根节点的全选来看看速度

 http://jscs.cloudapp.net/ControlsSample/BigTreeSample 

异步加载，按需加载的情况也是非常常用的，使用的是SQL Azure服务器在美国ing，所以可能异步有点慢，本地数据源那是瞬间的

 http://jscs.cloudapp.net/

原文地址：http://www.cnblogs.com/xuanye/archive/2009/10/26/1590250.html