现在的位置: 首页 > easyui > tree > 正文
tree:增加禁用和激活checkbox的方法扩展
2013年09月16日 tree ⁄ 共 4383字 评论数 12 ⁄ 被围观 18,062 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.   backgroundurl('images/tree_icons.png') no-repeat -272px -18px;   
  3. }   
  4. .tree-checkbox-disabled1{   
  5.   backgroundurl('images/tree_icons.png') no-repeat -272px 0;   
  6. }   
  7. .tree-checkbox-disabled2{   
  8.   backgroundurl('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

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

  1. 老猪 : 2013年09月29日16:29:04  -49楼 @回复 回复

    效果演示有问题?多点两下。树直接出不来了


    • 管理员
      世纪之光 : 2013年09月29日18:23:08  地下1层 @回复 回复

      可以把具体操作说明一下吗?还有浏览器环境。

  2. metoo13 : 2013年11月18日11:33:18  -48楼 @回复 回复

    这个可以改成所有checkbox都禁用么,就是只读的状态

    • 世纪之光 : 2013年11月19日09:24:46  地下1层 @回复 回复

      你可以基于我写的这个自己改造一下,全部禁用的话,无非也就是加个循环而已。

      • metoo13 : 2013年11月19日11:06:17  地下2层 @回复 回复

        我不太会改,我只是获取了所有的id,想在$(‘#tt’).tree(‘disableCheck’,”124″)的id处循环,但是错的,是不是要改 if(typeof target == “string” || typeof target == “number”){
        realTarget = $(this).tree(“find”,target).target;
        }else{
        realTarget = target;
        } 这一块

  3. apricot508 : 2014年02月17日16:52:24  -47楼 @回复 回复

    博主,想求教一个问题,easyui tree的子叶怎样才能更改成横向显示,自己试着改了一下,都不成功,没有办法,自己的jquery功底太浅。

  4. lele : 2014年12月09日17:14:15  -46楼 @回复 回复

    博主,datagrid的禁用和激活checkbox的方法怎么扩展

  5. repay : 2016年06月06日13:56:06  -45楼 @回复 回复

    有帮助,很感谢。虽然不是我需要的,但是给了我思路

  6. java小子 : 2016年09月19日11:13:04  -44楼 @回复 回复

    问题已解决 谢谢博主 😛

给我留言

留言无头像?


×