`

让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 + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"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)) + "\" onclick=\"webFXTreeHandler.toggle(this);\">"  
  35.   
  36. // insert check box   
  37. str += " +   
  38. " class=\"tree-check-box\"" +   
  39. (this._checked ? " checked=\"checked\"" : "") +   
  40. " onclick=\"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) + "\" onclick=\"webFXTreeHandler.select(this);\"> + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"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的作者 非常仔细地注释

"

分享到:
评论

相关推荐

    xtree+checkbox+radio,xloadtree+checkbox+radio

    `xtree`的一个显著特点就是支持复选框功能,用户可以通过勾选或取消复选框来选择一个或多个节点,这对于多选操作非常有用。 另一方面,`xloadtree`是在`xtree`基础上进行了扩展,增加了异步加载(ajax加载)的能力...

    js树形xtree117

    8. **多语言支持**:js tree支持多语言,通过`language`配置项可以设置语言,或者自定义语言包。 9. **主题与样式**:js tree允许自定义主题和样式,以适应不同项目的视觉需求。 10. **无障碍性(Accessibility)*...

    xloadtree

    3. **xloadtree+checkbox+radio**:这个组合意味着xloadtree组件不仅支持Ajax动态加载数据,还同时支持复选和单选功能。用户可以根据需求,通过点击节点旁边的checkbox进行多选操作,或通过radio进行单选操作,这在...

    extree 2.8

    EXTree 2.8 是一个专门用于Web开发的高级组件,它提供了一种直观且功能丰富的树形控件,能够支持CheckBox和RadioButton等交互元素。这个控件在网页设计中非常实用,允许用户以树状结构展示数据,并通过CheckBox和...

    详解layui中的树形关于取值传值问题

    if (_this.getChildByClassName(xtree_all[i], 'layui-xtree-checkbox')[0].checked) { xtree_count++; } } if (xtree_count ) { _this.getChildByClassName(xtree_p, 'layui-xtree-checkbox')[0].checked = ...

    layui+ztree下拉树,支持单选和多选

    同时,为了提高用户体验,可以添加搜索功能,让用户能够快速定位到目标节点。 这个下拉树组件适用于多种场景,比如在权限管理中选择角色、在组织结构中选择员工、在商品分类中选择类型等。通过自定义`ztree`的配置...

    vue自定义无限级权限树组件.zip

    2. 各节点增加input type=‘checkbox’,实现打勾 3. 每次点击子节点通过最上层父组件更新数据,因为涉及到循环嵌套,不能只调用本组件的父组件操作,每个组件通过属性记录最上层父组件,这样不管哪级组件都可以调用...

    js效果页面实例及说明文档包html版

    带checkbox的xTree 3.普通的loadtree 4.带checkbox的loadtree &lt;br&gt;7.进度条 &lt;br&gt;1.进度条(后台采用flush) &lt;br&gt;8.模拟类 &lt;br&gt;1.模拟页面级内容搜索 2.模拟可以拖拽的小窗口 3.模拟...

    layui 数菜单插件

    16、解决单页面多个xtree冲突的问题; 17、如layui一样简单的使用方式; 提供四种方法: 1、获取全部[选中的][末级节点]原checkbox DOM对象,返回Array 2、获取全部原checkbox DOM对象,返回Array 3、通过value值找...

Global site tag (gtag.js) - Google Analytics