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

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

1.;(function($)　{
2.　　　　　//也可以使用$.fn.extend(treeview:function(setting){})
3.　　　　$.fn.treeview　=　function(settings)　{
4.　　　　}
5.　
6.})(jQuery);

　　那第二步：给控件加一些参数默认参数，同时能调用方法$.extend让最终调用时的参数覆盖默认的（如果没有则使用默认）

01.var　dfop　={
02.　　　　　　　　　　　　　　　　method:　"POST",//默认采用POST提交数据
03.　　　　　　　　　　　　　　　　datatype:　"json",//数据类型是json
04.　　　　　　　　　　　　　　　　url:　false,//异步请求的url
05.　　　　　　　　　　　　　　　　cbiconpath:　"/images/icons/",//checkbox　icon的目录位置
06.　　　　　　　　　　　　　　　　icons:　["checkbox_0.gif",　"checkbox_1.gif",　"checkbox_2.gif"],//checkbxo三态的图片
07.　　　　　　　　　　　　　　　　showcheck:　false,　//是否显示checkbox　　　　　　　　　
08.　　　　　　　　　　　　　　　　oncheckboxclick:　false,　//点击checkbox时触发的事件
09.　　　　　　　　　　　　　　　　onnodeclick:　false,//点击node触发的时间
10.　　　　　　　　　　　　　　　　cascadecheck:　true,//是否启用级联
11.　　　　　　　　　　　　　　　　data:　null,//初始化数据　　　　　　　　　　　　
12.　　　　　　　　　　　　　　　　theme:　"bbit-tree-arrows"　//三种风格备选bbit-tree-lines　,bbit-tree-no-lines,bbit-tree-arrows
13.　　　　　　　　　　　　}
14.　　　　　　　　//用传进来的参数覆盖默认，没传则保留
15.　　　　　　　　$.extend(dfop,　settings);
第三步：生成默认数据的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（节点路径）