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);

View Code

 

示例代码

 

<!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>

View Code

 

插件效果