第一步：自然是所有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（节点路径），方便检索
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.}
注册事件，接受参数parent，即从某一父节点开始附加事件（因为做了个hover效果，所以事件是在每个节点上，如果取消该效果，事件可直接附加Tree上通过Event的srcElement来分发可略提升性能）
01.function InitEvent(parent) {
02. var nodes = $("li.bbit-tree-node>div", parent);
03. nodes.each(function(e) {
04. $(this).hover(function() {
05. $(this).addClass("bbit-tree-node-over"); //鼠标浮动节点的样式变化
06. }, function() {
07. $(this).removeClass("bbit-tree-node-over");
08. })
09. .click(nodeclick)//node的onclick事件，这个是重点哦
10. .find("img.bbit-tree-ec-icon").each(function(e) { //arrow的hover事件，为了实现vista那个风格的
11. if (!$(this).hasClass("bbit-tree-elbow")) {
12. $(this).hover(function() {
13. $(this).parent().addClass("bbit-tree-ec-over");
14. }, function() {
15. $(this).parent().removeClass("bbit-tree-ec-over");
16. });
17. }
18. });
19. });
20.}
这里最主要的还是node的click事件，因为他要处理的事情很多，如树的展开收缩（如果子节点不存在，但是hasChildren为真，同时 complete属性不为真则需要异步加载子节点，如子节点存在，但是没有Render那么就要Render）,点击checkbox要出发级联的事件和 oncheckbox事件，点击其他则触发配置条件的nodeonclick事件，这一切都通过前面event的源元素的class来区分点击的对象
01. function nodeclick(e) {
02. var path = $(this).attr("tpath");//获取节点路径
03. var et = e.target || e.srcElement;//获取事件源
04. var item = getItem(path);//根据path获取节点的数据
05. //debugger;
06. if (et.tagName == "IMG") {
07. // +号需要展开，处理加减号
08. if ($(et).hasClass("bbit-tree-elbow-plus") || $(et).hasClass("bbit-tree-elbow-end-plus")) {
09. var ul = $(this).next(); //"bbit-tree-node-ct"
10. if (ul.hasClass("bbit-tree-node-ct")) {
11. ul.show();
12. }
13. else {
14. var deep = path.split(".").length;
15. if (item.complete) {
16. item.ChildNodes != null && asnybuild(item.ChildNodes, deep, path, ul, item);
17. }
18. else {
19. $(this).addClass("bbit-tree-node-loading");
20. asnyloadc(ul, item, function(data) {
21. item.complete = true;
22. item.ChildNodes = data;
23. asnybuild(data, deep, path, ul, item);
24. });
25. }
26. }
27. if ($(et).hasClass("bbit-tree-elbow-plus")) {
28. $(et).swapClass("bbit-tree-elbow-plus", "bbit-tree-elbow-minus");
29. }
30. else {
31. $(et).swapClass("bbit-tree-elbow-end-plus", "bbit-tree-elbow-end-minus");
32. }
33. $(this).swapClass("bbit-tree-node-collapsed", "bbit-tree-node-expanded");
34. }
35. else if ($(et).hasClass("bbit-tree-elbow-minus") || $(et).hasClass("bbit-tree-elbow-end-minus")) { //- 号需要收缩
36. $(this).next().hide();
37. if ($(et).hasClass("bbit-tree-elbow-minus")) {
38. $(et).swapClass("bbit-tree-elbow-minus", "bbit-tree-elbow-plus");
39. }
40. else {
41. $(et).swapClass("bbit-tree-elbow-end-minus", "bbit-tree-elbow-end-plus");
42. }
43. $(this).swapClass("bbit-tree-node-expanded", "bbit-tree-node-collapsed");
44. }
45. else if ($(et).hasClass("bbit-tree-node-cb")) // 点击了Checkbox
46. {
47. var s = item.checkstate != 1 ? 1 : 0;
48. var r = true;
49. if (dfop.oncheckboxclick) { //触发配置的函数
50. r = dfop.oncheckboxclick.call(et, item, s);
51. }
52. if (r != false) {//如果返回值不为false，即checkbxo变化有效
53. if (dfop.cascadecheck) {//允许触发级联
54. //遍历
55. cascade(check, item, s);//则向下关联
56. //上溯
57. bubble(check, item, s); //向上关联
58. }
59. else {
60. check(item, s, 1);//否则只管自己
61. }
62. }
63. }
64. }
65. else {//点击到了其他地方
66. if (dfop.citem) { //上一个当前节点
67. $("#" + id + "_" + dfop.citem.id).removeClass("bbit-tree-selected");
68. }
69. dfop.citem = item;//这次的当前节点
70. $(this).addClass("bbit-tree-selected");
71. if (dfop.onnodeclick) {
72. dfop.onnodeclick.call(this, item);
73. }
74. }
75.}
展开节点，异步请求的部分代码应该不是很复杂就不细诉了，关键来讲一下级联
级联有两个问题要处理，第一个是遍历子节点，第二个是上溯到祖节点，因为我们的数据结构这两个操作都显得非常简单
01.//遍历子节点
02.function cascade(fn, item, args) {
03. if (fn(item, args, 1) != false) {
04. if (item.ChildNodes != null && item.ChildNodes.length > 0) {
05. var cs = item.ChildNodes;
06. for (var i = 0, len = cs.length; i < len; i++) {
07. cascade(fn, cs[i], args);
08. }
09. }
10. }
11.}
12.//冒泡的祖先
13.function bubble(fn, item, args) {
14. var p = item.parent;
15. while (p) {
16. if (fn(p, args, 0) === false) {
17. break;
18. }
19. p = p.parent;
20. }
21.}
找到节点的同时都会触发check这个回调函数，来判断当前节点的状态，详细请看下面代码中的注释部分应该是比较清晰，描写了这个过程
01. function check(item, state, type) {
02. var pstate = item.checkstate; //当前状态
03. if (type == 1) {
04. item.checkstate = state; //如果是遍历子节点，父是什么子就是什么
05. }
06. else {// 上溯 ，这个就复杂一些了
07. var cs = item.ChildNodes; //获取当前节点的所有子节点
08. var l = cs.length;
09. var ch = true; //是否不是中间状态 半选
10. for (var i = 0; i < l; i++) {
11. if ((state == 1 && cs[i].checkstate != 1) || state == 0 && cs[i].checkstate != 0) {
12. ch = false;
13. break;//他的子节点只要有一个没选中，那么他就是半选
14. }
15. }
16. if (ch) {
17. item.checkstate = state;//不是半选，则子节点是什么他就是什么
18. }
19. else {
20. item.checkstate = 2; //半选
21. }
22. }
23. //change show 如果节点已输出，而其前后状态不一样，则变化checkbxo的显示
24. if (item.render && pstate != item.checkstate) {
25. var et = $("#" + id + "_" + item.id + "_cb");
26. if (et.length == 1) {
27. et.attr("src", dfop.cbiconpath + dfop.icons[item.checkstate]);
28. }
29. }
30.}
至此我们树的主体功能已经完全实现了。其他就是公开一些方法等，大家可详见代码，示例中公开了两个一个当前选中的所有节点，另外一个当前的节点。
大家可以通过以下网址查看文中的示例，selected拼错了，大家海涵！ windows azure部署还是麻烦懒得修改了3500+节点一次加载，大家可以点击根节点的全选来看看速度
http://jscs.cloudapp.net/ControlsSample/BigTreeSample
异步加载，按需加载的情况也是非常常用的，使用的是SQL Azure服务器在美国ing，所以可能异步有点慢，本地数据源那是瞬间的