easyui源码翻译1.32--ComboTree（树形下拉框）

前言

扩展自$.fn.combo.defaults和$.fn.tree.defaults。使用$.fn.combotree.defaults重写默认值对象。下载该插件翻译源码

树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树形控件。该控件支持树状态复选框，方便多选操作

依赖关系

• combo
• tree

源码

/**
 * jQuery EasyUI 1.3.2
 *
 *翻译： qq  1364386878 下拉树
 */
(function ($) {
    //设置大小
    function setSize(jq) {
        var options = $.data(jq, "combotree").options;
        var combotree = $.data(jq, "combotree").tree;
        $(jq).addClass("combotree-f");
        $(jq).combo(options);
        var panel = $(jq).combo("panel");
        if (!combotree) {
            combotree = $("<ul></ul>").appendTo(panel);
            $.data(jq, "combotree").tree = combotree;
        }
        combotree.tree($.extend({},
            options, {
            checkbox: options.multiple,
            onLoadSuccess: function (node, data) {
                var values = $(jq).combotree("getValues");
                if (options.multiple) {
                    var checkedNodes = combotree.tree("getChecked");
                    for (var i = 0; i < checkedNodes.length; i++) {
                        var id = checkedNodes[i].id;
                        (function () {
                            for (var i = 0; i < values.length; i++) {
                                if (id == values[i]) {
                                    return;
                                }
                            }
                            values.push(id);
                        })();
                    }
                }
                $(jq).combotree("setValues", values);
                options.onLoadSuccess.call(this, node, data);
            },
            onClick: function (node) {
                select(jq);
                $(jq).combo("hidePanel");
                options.onClick.call(this, node);
            },
            onCheck: function (node, node) {
                select(jq);
                options.onCheck.call(this, node, node);
            }
        }));
    };
    //选择
    function select(jq) {
        var options = $.data(jq, "combotree").options;
        var combotree = $.data(jq, "combotree").tree;
        var vv = [], ss = [];
        if (options.multiple) {
            var checkedNode = combotree.tree("getChecked");
            for (var i = 0; i < checkedNode.length; i++) {
                vv.push(checkedNode[i].id);
                ss.push(checkedNode[i].text);
            }
        } else {
            var checkedNode = combotree.tree("getSelected");
            if (checkedNode) {
                vv.push(checkedNode.id);
                ss.push(checkedNode.text);
            }
        }
        $(jq).combo("setValues", vv).combo("setText", ss.join(options.separator));
    };
    //设置数组值
    function setValues(jq, values) {
        var options = $.data(jq, "combotree").options;
        var combotree = $.data(jq, "combotree").tree;
        combotree.find("span.tree-checkbox").addClass("tree-checkbox0").removeClass("tree-checkbox1 tree-checkbox2");
        var vv = [], ss = [];
        for (var i = 0; i < values.length; i++) {
            var v = values[i];
            var s = v;
            var node = combotree.tree("find", v);
            if (node) {
                s = node.text;
                combotree.tree("check", node.target);
                combotree.tree("select", node.target);
            }
            vv.push(v);
            ss.push(s);
        }
        $(jq).combo("setValues", vv).combo("setText", ss.join(options.separator));
    };
    //实例化下拉树
    $.fn.combotree = function (target, parm) {
        if (typeof target == "string") {
            var method = $.fn.combotree.methods[target];
            if (method) {
                return method(this, parm);
            } else {
                return this.combo(target, parm);
            }
        }
        target = target || {};
        return this.each(function () {
            var combotree = $.data(this, "combotree");
            if (combotree) {
                $.extend(combotree.options, target);
            } else {
                $.data(this, "combotree", {
                    options: $.extend({},
                        $.fn.combotree.defaults,
                        $.fn.combotree.parseOptions(this),
                        target)
                });
            }
            setSize(this);
        });
    };
    //默认方法
    $.fn.combotree.methods = {
        //返回属性对象
        options: function (jq) {
            var options = $.data(jq[0], "combotree").options;
            options.originalValue = jq.combo("options").originalValue;
            return options;
        },
        //返回树形对象
        tree: function (jq) {
            return $.data(jq[0], "combotree").tree;
        },
        //读取本地树形数据
        loadData: function (jq, data) {
            return jq.each(function () {
                var options = $.data(this, "combotree").options;
                options.data = data;
                var tree = $.data(this, "combotree").tree;
                tree.tree("loadData", data);
            });
        },
        //再次请求远程树数据。通过'url'参数重写原始URL值
        reload: function (jq, url) {
            return jq.each(function () {
                var options = $.data(this, "combotree").options;
                var tree = $.data(this, "combotree").tree;
                if (url) {
                    options.url = url;
                }
                tree.tree({ url: options.url });
            });
        },
        //设置组件值数组
        setValues: function (jq, values) {
            return jq.each(function () {
                setValues(this, values);
            });
        },
        //设置组件值。
        setValue: function (jq, value) {
            return jq.each(function () {
                setValues(this, [value]);
            });
        },
        //清空控件的值
        clear: function (jq) {
            return jq.each(function () {
                var tree = $.data(this, "combotree").tree;
                tree.find("div.tree-node-selected").removeClass("tree-node-selected");
                var cc = tree.tree("getChecked");
                for (var i = 0; i < cc.length; i++) {
                    tree.tree("uncheck", cc[i].target);
                }
                $(this).combo("clear");
            });
        },
        //重置
        reset: function (jq) {
            return jq.each(function () {
                var options = $(this).combotree("options");
                if (options.multiple) {
                    $(this).combotree("setValues", options.originalValue);
                } else {
                    $(this).combotree("setValue", options.originalValue);
                }
            });
        }
    };
    //解析器
    $.fn.combotree.parseOptions = function (target) {
        return $.extend({}, $.fn.combo.parseOptions(target),
            $.fn.tree.parseOptions(target));
    };
    //默认属性、事件 继承comb和tree的
    $.fn.combotree.defaults = $.extend({},
        $.fn.combo.defaults,
        $.fn.tree.defaults,
        {
            //定义用户是否可以直接输入文本到字段中
            editable: false
        });
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic ComboTree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script src="../../plugins2/jquery.parser.js"></script>
      <script src="../../plugins2/jquery.validatebox.js"></script>
    <script src="../../plugins2/jquery.panel.js"></script>
    <script src="../../plugins2/jquery.combo.js"></script>
    <script src="../../plugins2/jquery.draggable.js"></script>
    <script src="../../plugins2/jquery.droppable.js"></script>
    <script src="../../plugins2/jquery.tree.js"></script>
    <script src="../../plugins2/jquery.combotree.js"></script>
</head>
<body>
    <h2>Basic ComboTree</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click the right arrow button to show the tree panel.</div>
    </div>
    <div style="margin:10px 0"></div>
    <input class="easyui-combotree" data-options="url:'../combotree/tree_data1.json',required:true" style="width:200px;">

</body>
</html>

插件效果