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

核心提示： 第三步：生成默认数据的HTML（根据我们的分析节点的Dom结构，数据的数据结构，打造基于jQuery的高性能TreeView(下)(2)，生成节点那是非常的简单），，其实直接用dfop.data也可以02.varme=$(this);03.varid=me.attr("id"

第三步：生成默认数据的HTML（根据我们的分析节点的Dom结构，数据的数据结构，生成节点那是非常的简单），，添加到当前容器中。最后是注册事件这里有一个非常重要的地方，即懒加载(没有展开的节点HTML是不生成的)，这就要求我们在树内部要维护一套数据（开销很小），对于性能的提升那是相当的明显。另外一个重要的地方，就是使用一次生成所有展开节点的HTML并通过innerHTML属性来生成Dom，而不是通过append操作，因为直接操作innerHTML比通过dom原生的方法要快上N倍（节点越多，N越大），切记切记！

01.var　treenodes　=　dfop.data;　//内部的数据，其实直接用　dfop.data也可以
02.var　me　=　$(this);
03.var　id　=　me.attr("id");
04.if　(id　==　null　||　id　==　"")　{
05.　　　　id　=　"bbtree"　+　new　Date().getTime();
06.　　　　me.attr("id",　id);
07.}//全局唯一的ID
08.　
09.var　html　=　[];
10.buildtree(dfop.data,　html);//生成展开节点的HTML，push到数组中
11.me.addClass("bbit-tree").html(html.join(""));
12.InitEvent(me);//初始化事件
13.html　=　null;

在节点生成过程中，同时可生产节点的Path（节点路径），方便检索

01.if　(nd.hasChildren)　{　//存在子节点
02.　　　　if　(nd.isexpand)　{//同时节点已经展开则输出子节点
03.　　　　　　　　ht.push("<ul　　class='bbit-tree-node-ct'　　style='z-index:　0;　position:　static;　visibility:　visible;　top:　auto;　left:　auto;'>");
04.　　　　　　　　if　(nd.ChildNodes)　{
05.　　　　　　　　　　　　var　l　=　nd.ChildNodes.length;
06.　　　　　　　　　　　　for　(var　k　=　0;　k　<　l;　k++)　{//递归调用并生产节点的路径
07.　　　　　　　　　　　　　　　　nd.ChildNodes[k].parent　=　nd;
08.　　　　　　　　　　　　　　　　buildnode(nd.ChildNodes[k],　ht,　deep　+　1,　path　+　"."　+　k,　k　==　l　-　1);
09.　　　　　　　　　　　　}
10.　　　　　　　　}
11.　　　　　　　　ht.push("</ul>");
12.　　　　}
13.　　　　else　{　//否则是待输出状态
14.　　　　　　　　ht.push("<ul　style='display:none;'></ul>");
15.　　　　}
16.}