easyui源码翻译1.32--ComboGrid（数据表格下拉框）

前言

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

数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选

源码

/**
 * jQuery EasyUI 1.3.2
 *
 *翻译：qq 1364386878 下拉表格
 */
(function ($) {

    function create(jq) {
        var options = $.data(jq, "combogrid").options;
        var grid = $.data(jq, "combogrid").grid;
        $(jq).addClass("combogrid-f");
        $(jq).combo(options);
        var panel = $(jq).combo("panel");
        if (!grid) {
            grid = $("<table></table>").appendTo(panel);
            $.data(jq, "combogrid").grid = grid;
        }
        //
        grid.datagrid($.extend({}, options, {
            border: false,
            fit: true,
            singleSelect: (!options.multiple),
            onLoadSuccess: function (_6) {
                var remainText = $.data(jq, "combogrid").remainText;
                var remainText = $(jq).combo("getValues");
                _setValues(jq, remainText, remainText);
                options.onLoadSuccess.apply(jq, arguments);
            },

            onClickRow: onClickRow,
            onSelect: function (rowIndex, rowData) {
                retrieveValues();
                options.onSelect.call(this, rowIndex, rowData);
            },
            onUnselect: function (rowIndex, rowData) {
                retrieveValues();
                options.onUnselect.call(this, rowIndex, rowData);
            },
            onSelectAll: function (rows) {
                retrieveValues();
                options.onSelectAll.call(this, rows);
            },
            onUnselectAll: function (rows) {
                if (options.multiple) {
                    retrieveValues();
                }
                options.onUnselectAll.call(this, rows);
            }
        }));

        function onClickRow(rowIndex, row) {
            $.data(jq, "combogrid").remainText = false;
            retrieveValues();
            if (!options.multiple) {
                $(jq).combo("hidePanel");
            }
            options.onClickRow.call(this, rowIndex, row);
        };

        function retrieveValues() {
            var remainText = $.data(jq, "combogrid").remainText;
            var rows = grid.datagrid("getSelections");
            var vv = [], ss = [];
            for (var i = 0; i < rows.length; i++) {
                vv.push(rows[i][options.idField]);
                ss.push(rows[i][options.textField]);
            }
            if (!options.multiple) {
                $(jq).combo("setValues", (vv.length ? vv : [""]));
            } else {
                $(jq).combo("setValues", vv);
            }
            if (!remainText) {
                $(jq).combo("setText", ss.join(options.separator));
            }
        };
    };
    //选择行
    function selectRow(jq, step) {
        var options = $.data(jq, "combogrid").options;
        var grid = $.data(jq, "combogrid").grid;
        var length = grid.datagrid("getRows").length;
        if (!length) {
            return;
        }
        $.data(jq, "combogrid").remainText = false;
        var index;
        var rows = grid.datagrid("getSelections");
        if (rows.length) {
            index = grid.datagrid("getRowIndex", rows[rows.length - 1][options.idField]);
            index += step;
            if (index < 0) {
                index = 0;
            }
            if (index >= length) {
                index = length - 1;
            }
        } else {
            if (step > 0) {
                index = 0;
            } else {
                if (step < 0) {
                    index = length - 1;
                } else {
                    index = -1;
                }
            }
        }
        if (index >= 0) {
            grid.datagrid("clearSelections");
            grid.datagrid("selectRow", index);
        }
    };
    //设置值
    function _setValues(jq, values, remainText) {
        var options = $.data(jq, "combogrid").options;
        var grid = $.data(jq, "combogrid").grid;
        var rows = grid.datagrid("getRows");
        var ss = [];
        for (var i = 0; i < values.length; i++) {
            var index = grid.datagrid("getRowIndex", values[i]);
            if (index >= 0) {
                grid.datagrid("selectRow", index);
                ss.push(rows[index][options.textField]);
            } else {
                ss.push(values[i]);
            }
        }
        if ($(jq).combo("getValues").join(",") == values.join(",")) {
            return;
        }
        $(jq).combo("setValues", values);
        if (!remainText) {
            $(jq).combo("setText", ss.join(options.separator));
        }
    };
    //查询
    function _query(jq, q) {
        var options = $.data(jq, "combogrid").options;
        var grid = $.data(jq, "combogrid").grid;
        $.data(jq, "combogrid").remainText = true;
        if (options.multiple && !q) {
            _setValues(jq, [], true);
        } else {
            _setValues(jq, [q], true);
        }
        if (options.mode == "remote") {
            grid.datagrid("clearSelections");
            grid.datagrid("load", $.extend({}, options.queryParams, { q: q }));
        } else {
            if (!q) {
                return;
            }
            var rows = grid.datagrid("getRows");
            for (var i = 0; i < rows.length; i++) {
                if (options.filter.call(jq, q, rows[i])) {
                    grid.datagrid("clearSelections");
                    grid.datagrid("selectRow", i);
                    return;
                }
            }
        }
    };
    //实例化组件
    $.fn.combogrid = function (target, parm) {
        if (typeof target == "string") {
            var method = $.fn.combogrid.methods[target];
            if (method) {
                return method(this, parm);
            } else {
                return $.fn.combo.methods[target](this, parm);
            }
        }
        target = target || {};
        return this.each(function () {
            var state = $.data(this, "combogrid");
            if (state) {
                $.extend(state.options, target);
            } else {
                state = $.data(this, "combogrid", {
                    options: $.extend({},
                        $.fn.combogrid.defaults,
                        $.fn.combogrid.parseOptions(this),
                        target)
                });
            }
            create(this);
        });
    };
    //下拉表格默认方法
    $.fn.combogrid.methods = {
        //返回属性对象
        options: function (jq) {
            var options = $.data(jq[0], "combogrid").options;
            options.originalValue = jq.combo("options").originalValue;
            return options;
        },
        //返回数据表格对象
        grid: function (jq) {
            return $.data(jq[0], "combogrid").grid;
        },
        //返回数据表格对象
        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 () {
                $(this).combogrid("grid").datagrid("clearSelections");
                $(this).combo("clear");
            });
        },
        //重置
        reset: function (jq) {
            return jq.each(function () {
                var options = $(this).combogrid("options");
                if (options.multiple) {
                    $(this).combogrid("setValues", options.originalValue);
                } else {
                    $(this).combogrid("setValue", options.originalValue);
                }
            });
        }
    };
    //解析器
    $.fn.combogrid.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.fn.combo.parseOptions(target),
            $.fn.datagrid.parseOptions(target),
            $.parser.parseOptions(target, ["idField", "textField", "mode"]));
    };
    $.fn.combogrid.defaults = $.extend({}, $.fn.combo.defaults,
        $.fn.datagrid.defaults, {
            loadMsg: null,//在数据表格加载远程数据的时候显示消息
            idField: null,//ID字段名称
            textField: null,//ID字段名称
            //定义在文本改变的时候如何读取数据网格数据。设置为'remote'，
            //数据表格将从远程服务器加载数据。当设置为'remote'模式的时候，用户输入将会发送到名为'q'的http请求参数，向服务器检索新的数据。
            mode: "local",

            keyHandler: {
            up: function () {
                    selectRow(this, -1);
                },
                down: function () {
                    selectRow(this, 1);
                },
                enter: function () {
                    selectRow(this, 0);
                    $(this).combo("hidePanel");
                },
                query: function (q) {
                    _query(this, q);
                }
            },
            //定义在'mode'设置为'local'的时候如何选择本地数据，返回true时则选择该行
            filter: function (q, row) {
            var options = $(this).combogrid("options");
            return row[options.textField].indexOf(q) == 0;
        }
    });
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ComboGrid Actions - 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 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.resizable.js"></script>
    <script src="../../plugins2/jquery.linkbutton.js"></script>
    <script src="../../plugins2/jquery.pagination.js"></script>
    <script src="../../plugins2/jquery.combo.js"></script>
    <script src="../../plugins2/jquery.datagrid.js"></script>
    <script src="../../plugins2/jquery.combogrid.js"></script>
</head>
<body>
    <h2>ComboGrid Actions</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click the buttons below to perform actions.</div>
    </div>
    <div style="margin:10px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
    </div>
    <input id="cc" class="easyui-combogrid" style="width:250px" data-options="
            panelWidth: 500,
            idField: 'itemid',
            textField: 'productname',
            url: '../combogrid/datagrid_data1.json',
            columns: [[
                {field:'itemid',title:'Item ID',width:80},
                {field:'productname',title:'Product',width:120},
                {field:'listprice',title:'List Price',width:80,align:'right'},
                {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
                {field:'attr1',title:'Attribute',width:200},
                {field:'status',title:'Status',width:60,align:'center'}
            ]],
            fitColumns: true
        ">
    <script type="text/javascript">
        function getValue(){
            var val = $('#cc').combogrid('getValue');
            alert(val);
        }
        function setValue(){
            $('#cc').combogrid('setValue', 'EST-13');
        }
        function disable(){
            $('#cc').combogrid('disable');
        }
        function enable(){
            $('#cc').combogrid('enable');
        }
    </script>
</body>
</html>

插件效果