zoukankan      html  css  js  c++  java
  • 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="200px;">
    
    </body>
    </html>
    View Code

    插件效果

    热爱编程,热爱技术,热爱生活
  • 相关阅读:
    Vsftpd 3.0.2 正式版发布
    Putdb WebBuilder 6.5 正式版本发布
    SoaBox 1.1.6 GA 发布,SOA 模拟环境
    pynag 0.4.6 发布,Nagios配置和插件管理
    Percona Playback 0.4,MySQL 负荷回放工具
    xombrero 1.3.1 发布,微型 Web 浏览器
    Hypertable 0.9.6.4 发布,分布式数据库
    libmemcached 1.0.11 发布
    CryptoHeaven 3.7 发布,安全邮件解决方案
    Android Activity生命周期
  • 原文地址:https://www.cnblogs.com/DemoLee/p/3495947.html
Copyright © 2011-2022 走看看