EasyUI 之 Combotree 简单扩展

EasyUI 之 Combotree简单扩展

 

     前期在QQ群众遇到群友提问个问题，就是 comboTree 的节点图标怎么移除。官网上面并没有给出 不显示图标的属性和方法。（PS: comboTree 继承于combo 和 tree）。

官网示例：

　　

先做之前，咱们使用 谷歌浏览器看看经过easyUI渲染后节点图标的html代码：

鼠标对着图标右击->查看元素，如下图：

　　

原来 是 span 加了class样式生成的。这样我们直接在combotree 渲染后直接删除其节点下的 span 不就ok了吗？

代码如下：

$(".easyui-tree").find("span.tree-icon").remove();

将代码拷贝到谷歌控制台，回车，效果出来了。如下图：

我们发现，节点图标已经不存在并且dom中也没有 span. tree-icon 元素了。

展开折叠节点，发现出现图标了。如下图：

 

发现是这个样式控制的。

于是我就想到那么我就在节点展开后，设置tree-folder-open 样式的 background为none。

代码如下：

onExpand: function(node) {
                    $(node.target).find("span.tree-folder-open").css("background", "none");
}

 

这样，就实现了移除 combotree 的节点图标。于是乎我就去和群友邀功。

功劳没邀成，反而问题也来了。 若是大批量的使用，这种方法不累死才怪。想象也是。这样岂不是给别人造成麻烦了。那么就改吧。既然combotree 没有这种方法。咱们就给他扩展个。

       下面咱们来介绍下我经常使用的扩展外壳。扩展的时候直接在里面填充逻辑代码就好了，这样让我们有更多的时间去专注本质问题而不是考虑怎么写扩展。

       代码如下：

(function ($) {

    function buildCombotree(target) { // 初始化
       
    }
 
    // 程序主入口
    $.fn.dcombotree = function (options, param) { 
        if (typeof options == 'string') {
            var method = $.fn.dcombotree.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.combotree(options, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, 'dcombotree');
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, 'dcombotree', {
                    options: $.extend({}, $.fn.dcombotree.defaults, $.fn.dcombotree.parseOptions(this), options)
                });
            }
            buildCombotree(this);
        });
    };

    $.fn.dcombotree.parseOptions = function (target) {
        return $.extend({}, $.fn.combotree.parseOptions(target), {
        });
    };

    // 程序方法
    $.fn.dcombotree.methods = {  

    };

    // 程序默认属性
    $.fn.dcombotree.defaults = {
      
    };
})(jQuery);

此段代码在直接摘自于  http://www.jeasyui.com/extension/edatagrid.php 有兴趣可以下载下来研究。

 

扩展的外壳写好了。那么就专注功能实现吧。

我的思路还是上面提到的： 在combotree加载成功后直接删除 span. tree-icon 元素。在展开事件修改设置tree-folder-open 样式的 background为none。说干就干，下面贴出代码：

(function ($) {

    function buildCombotree(target) { // 初始化
        var opts = $.data(target, 'dcombotree').options;  // 获取 dcombotree 的 options
        $(target).combotree($.extend({}, opts, {})); //  去渲染 combotree
        if (!opts.showIcon) {  // 是要移除 图标
            var tree = $(target).dcombotree('tree');  // 取得 combotree 的 tree。
            tree.tree({
                onLoadSuccess: function(node, data) {  // tree 数据载入成功后执行所有节点图标删除。采用的是递归遍历节点然后删除
                    removeIcon($(this).tree("getRoots"), tree);
                },
                onExpand: function(node) {  // tree父节点展开事件。
                    $(node.target).find("span.tree-folder-open").css("background", "none");  //设置背景样式为 none
                }
            });
        }
    }

    // 递归删除 图标样式
    function removeIcon(node,tree) {
        $.each(tree.tree("getChildren",node.target), function (index, value) {  //遍历当前界面的 子节点
            $(value.target).find("span.tree-icon").remove(); // 移除图标span
            if (value.children != undefined && value.children.length > 0)  // 是否需要继续递归删除
                removeIcon(value, tree);
        });
    }

    $.fn.dcombotree = function (options, param) {  // 程序主入口
        if (typeof options == 'string') {
            var method = $.fn.dcombotree.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.combotree(options, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, 'dcombotree');
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, 'dcombotree', {
                    options: $.extend({}, $.fn.dcombotree.defaults, $.fn.dcombotree.parseOptions(this), options)
                });
            }
            buildCombotree(this);
        });
    };
    
    $.fn.dcombotree.parseOptions = function (target) {
        return $.extend({}, $.fn.combotree.parseOptions(target), {
        });
    };

    $.fn.dcombotree.methods = {   // 程序方法
       
    };

    $.fn.dcombotree.defaults = {
        // 程序默认属性
        showIcon: true  // 展示combotree 的下拉数图标。默认展示
    };
})(jQuery);

界面引用：

 

PS：dcombotree 是咱们的插件名称，基于 easyUI combotree 实现的。不污染里面任何的代码。使用方便。Dcombotree 在我们设计外壳的时候写的。自习阅读dome中的代码。你自然会明白其中的道理。

 

实例预览：

在线演示Dome：http://zhanghs.nat123.net/dcombotree/

从上述代码可以看出，基本上是在 扩展外壳的基础上实现的。所以在此想大家建议： 在想扩展某个插件或者想自己写个扩展时候。请大家先自己动手实现，思路清洗后在去做扩展插件或者插件的开发。

 

PS：其实js插件开发不是想象中的那么难学。难学的是编程思想，而不是语言。

 

提供源码下载，下载后记得推荐哦。