jQuery树形菜单TreeView高性能应用(5)
01. function nodeclick(e) { 02. var path = $( this ).attr( "tpath" ); //获取节点路径 03. var et = e.target || e.srcElement; //获取事件源 04. var item = getItem(path); //根据path获取节点
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.}展开节点，异步请求的部分代码应该不是很复杂就不细诉了，关键来讲一下级联
级联有两个问题要处理，第一个是遍历子节点，第二个是上溯到祖节点，因为我们的数据结构这两个操作都显得非常简单
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这个回调函数，来判断当前节点的状态，详细请看下面代码中的注释部分应该是比较清晰，描写了这个过程
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，所以可能异步有点慢，本地数据源那是瞬间的
http://jscs.cloudapp.net/
