现在的位置: 首页 > easyui > tree > 正文
小 中 大
tree:增加禁用和激活checkbox的方法扩展
2013年09月16日 ⁄ tree ⁄ 共 4383字 ⁄ 评论数 12 ⁄ 被围观 23,681 views+
文章目录
[隐藏]

EasyUI的tree组件没有提供禁用和激活checkbox的方法，而禁用是很多场景需要用到的。所以在此我通过扩展方法的方式来实现这个功能，之所以选择扩展方法，是为了尽量不改动源码，方便版本升级（本扩展基于1.3.3实现，应该是兼容1.3.0之后所有版本的）。

实现步骤：

修改图标文件：

修改tree组件用到的图标文件，在同一幅图片里增加禁用状态下checkbox的背景图，注意的是，一定是要追加，这样不会对之前的样式有影响，最终我改好的图，如下：

图标文件

修改样式文件：

修改的图标文件就是为了给新样式使用的，样式文件可以修改easyui.css也可以修改tree.css，如果修改的是后者的话，需要引入tree.css才行，这里拿easyui.css举例，找到"tree-checkbox2"样式的定义，在其下追加三个样式的定义（注意，必须是定义在tree-checkbox2样式后，这样才能覆盖前面的background定义）：

  1. .tree-checkbox-disabled0{   
  2.   background: url('images/tree_icons.png') no-repeat -272px -18px;   
  3. }   
  4. .tree-checkbox-disabled1{   
  5.   background: url('images/tree_icons.png') no-repeat -272px 0;   
  6. }   
  7. .tree-checkbox-disabled2{   
  8.   background: url('images/tree_icons.png') no-repeat -288px 0;   
  9. }  
扩展tree组件方法：
  1. /**  
  2.  * tree方法扩展  
  3.  * 作者:小雪转中雪  
  4.  */  
  5. $.extend($.fn.tree.methods, {   
  6.     /**
  7.      * 激活复选框  
  8.      * @param {Object} jq  
  9.      * @param {Object} target  
  10.      */  
  11.     enableCheck : function(jq, target) {    
  12.         return jq.each(function(){   
  13.             var realTarget;   
  14.             if(typeof target == "string" || typeof target == "number"){   
  15.                 realTarget = $(this).tree("find",target).target;   
  16.             }else{   
  17.                 realTarget = target;   
  18.             }   
  19.             var ckSpan = $(realTarget).find(">span.tree-checkbox");   
  20.             if(ckSpan.hasClass('tree-checkbox-disabled0')){   
  21.                 ckSpan.removeClass('tree-checkbox-disabled0');   
  22.             }else if(ckSpan.hasClass('tree-checkbox-disabled1')){   
  23.                 ckSpan.removeClass('tree-checkbox-disabled1');   
  24.             }else if(ckSpan.hasClass('tree-checkbox-disabled2')){   
  25.                 ckSpan.removeClass('tree-checkbox-disabled2');   
  26.             }   
  27.         });   
  28.     },   
  29.     /**
  30.      * 禁用复选框  
  31.      * @param {Object} jq  
  32.      * @param {Object} target  
  33.      */  
  34.     disableCheck : function(jq, target) {   
  35.         return jq.each(function() {   
  36.             var realTarget;   
  37.             var that = this;   
  38.             var state = $.data(this,'tree');   
  39.             var opts = state.options;   
  40.             if(typeof target == "string" || typeof target == "number"){   
  41.                 realTarget = $(this).tree("find",target).target;   
  42.             }else{   
  43.                 realTarget = target;   
  44.             }   
  45.             var ckSpan = $(realTarget).find(">span.tree-checkbox");   
  46.             ckSpan.removeClass("tree-checkbox-disabled0").removeClass("tree-checkbox-disabled1").removeClass("tree-checkbox-disabled2");   
  47.             if(ckSpan.hasClass('tree-checkbox0')){   
  48.                 ckSpan.addClass('tree-checkbox-disabled0');   
  49.             }else if(ckSpan.hasClass('tree-checkbox1')){   
  50.                 ckSpan.addClass('tree-checkbox-disabled1');   
  51.             }else{   
  52.                 ckSpan.addClass('tree-checkbox-disabled2')   
  53.             }   
  54.             if(!state.resetClick){   
  55.                 $(this).unbind('click').bind('click', function(e) {   
  56.                     var tt = $(e.target);   
  57.                     var node = tt.closest('div.tree-node');   
  58.                     if (!node.length){return;}   
  59.                     if (tt.hasClass('tree-hit')){   
  60.                         $(this).tree("toggle",node[0]);   
  61.                         return false;   
  62.                     } else if (tt.hasClass('tree-checkbox')){   
  63.                         if(tt.hasClass('tree-checkbox-disabled0') || tt.hasClass('tree-checkbox-disabled1') || tt.hasClass('tree-checkbox-disabled2')){   
  64.                             $(this).tree("select",node[0]);   
  65.                         }else{   
  66.                             if(tt.hasClass('tree-checkbox1')){   
  67.                                 $(this).tree('uncheck',node[0]);   
  68.                             }else{   
  69.                                 $(this).tree('check',node[0]);   
  70.                             }   
  71.                             return false;   
  72.                         }   
  73.                     } else {   
  74.                         $(this).tree("select",node[0]);   
  75.                         opts.onClick.call(this, $(this).tree("getNode",node[0]));   
  76.                     }   
  77.                     e.stopPropagation();   
  78.                 });   
  79.             }   
  80.                
  81.         });   
  82.     }   
  83. });  

代码的实现思路很简单，重现委托事件就可以了，针对click类型的事件，检查节点是否包含禁用样式，然后分别给出不同处理方式。

使用方式：

  1. //入参可以是节点的ID也可以说节点的target   
  2. $('#tt').tree('disableCheck',"124");//禁用   
  3. $('#tt').tree('enableCheck',"124");//激活   

注意：在开启级联勾选的情况下，被禁用的checkbox如果不是叶子节点，可能反映不出其真实状态。

效果演示：

http://www.easyui.info/version/jquery-easyui-1.3.3/demo/tree/disablecheck.html

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

jQuery Easyui 1.3.2版本即将发布
Bug:Easyui 1.3.2版本可编辑表格的rejectChanges方法造成的表格瘫痪
让easyui layout的fit属性留有余地
让validatebox组件支持blur时触发校验

目前有 12 条留言 其中：访客:9 条, 博主:3 条

  1. 老猪 : 2013年09月29日16:29:04  -49楼 @回复 回复
  2. metoo13 : 2013年11月18日11:33:18  -48楼 @回复 回复
  3. apricot508 : 2014年02月17日16:52:24  -47楼 @回复 回复
  4. lele : 2014年12月09日17:14:15  -46楼 @回复 回复
  5. repay : 2016年06月06日13:56:06  -45楼 @回复 回复
  6. java小子 : 2016年09月19日11:13:04  -44楼 @回复 回复

给我留言

点击这里取消回复。
留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×