让XTREE支持CHECKBOX

转载:

js 代码

1.   
2.   
3. 在xtree.js的最后添加   
4. function WebFXCheckBoxTreeItem(sText, sAction, bChecked, eParent, sIcon, sOpenIcon) {   
5. this.base = WebFXTreeItem;   
6. this.base(sText, sAction, eParent, sIcon, sOpenIcon);   
7.   
8. this._checked = bChecked;   
9. }   
10.   
11. WebFXCheckBoxTreeItem.prototype = new WebFXTreeItem;   
12.   
13. WebFXCheckBoxTreeItem.prototype.toString = function (nItem, nItemCount) {   
14. var foo = this.parentNode;   
15. var indent = '';   
16. if (nItem + 1 == nItemCount) { this.parentNode._last = true; }   
17. var i = 0;   
18. while (foo.parentNode) {   
19. foo = foo.parentNode;   
20. indent = " + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent;   
21. i++;   
22. }   
23. this._level = i;   
24. if (this.childNodes.length) { this.folder = 1; }   
25. else { this.open = false; }   
26. if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) {   
27. if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; }   
28. if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; }   
29. }   
30. else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; }   
31. var label = this.text.replace(//g, '>');   
32. var str = " + this.id + "\" οndblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" οnkeydοwn=\"return webFXTreeHandler.keydown(this, event)\">";   
33. str += indent;   
34. str += " + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" οnclick=\"webFXTreeHandler.toggle(this);\">"  
35.   
36. // insert check box   
37. str += " +   
38. " class=\"tree-check-box\"" +   
39. (this._checked ? " checked=\"checked\"" : "") +   
40. " οnclick=\"webFXTreeHandler.all[this.parentNode.id].setChecked(this.checked)\"" +   
41. " />";   
42. // end insert checkbox   
43.   
44. str += " + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" οnclick=\"webFXTreeHandler.select(this);\"> + this.action + "\" id=\"" + this.id + "-anchor\" οnfοcus=\"webFXTreeHandler.focus(this);\" οnblur=\"webFXTreeHandler.blur(this);\">" + label + ";   
45. str += " + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";   
46. for (var i = 0; i < this.childNodes.length; i++) {   
47. str += this.childNodes[i].toString(i,this.childNodes.length);   
48. }   
49. str += " ";   
50. this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon);   
51. this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon);   
52. return str;   
53. }   
54.   
55. WebFXCheckBoxTreeItem.prototype.getChecked = function () {   
56. var divEl = document.getElementById(this.id);   
57. var inputEl = divEl.getElementsByTagName("INPUT")[0];   
58. return this._checked = inputEl.checked;   
59. };   
60.   
61. WebFXCheckBoxTreeItem.prototype.setChecked = function (bChecked) {   
62. if (bChecked != this.getChecked()) {   
63. var divEl = document.getElementById(this.id);   
64. var inputEl = divEl.getElementsByTagName("INPUT")[0];   
65. this._checked = inputEl.checked = bChecked;   
66.   
67. if (typeof this.onchange == "function")   
68. this.onchange();   
69. }   
70. };   

     

    
    
    并且在tree.js调用时把WebFXTreeItem 改成 WebFXCheckBoxTreeItem 其他的具体的你可以看下注视
    xtree的作者 非常仔细地注释

"