第一步:自然是所有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(节点路径)