写的扩展组件在dataGrid里显示

写的扩展组件在dataGrid里显示要在 rewrite-easyui.js里加下面

$.extend($.fn.datagrid.defaults.editors, {
    plantSearchGrid:{
        init: function(container, options){

            var input = $('<div class="easyui-plantSearchGrid" >').appendTo(container);
            $(container).find(".easyui-plantSearchGrid").plantSearchGrid(options);
            return input;
        },
        getValue: function(target){
            $(target).plantSearchGrid("getValue");
        },
        setValue: function(target, value){
            $(target).combogrid("setValue",value);
        },
        resize: function(target, width){
            $(target).combogrid("resize",width);
        }
    },

});

在component.js里写的扩展组件

$.parser.plugins.push("plantSearchGrid");//注册扩展组件
$.fn.plantSearchGrid = function (options, param) {//定义扩展组件
    if (typeof options == "string") {
        return $.fn.plantSearchGrid.method[options].apply(this, arguments);
    }
    options = options || {};
    options = $.extend({}, $.fn.plantSearchGrid.options, options);
    return this.each(function () { //当该组件在页面出现多次时  是一个集合 所以用each来遍历
        var opts = $.extend(true, options, $.fn.combogrid.parseOptions(this));
        var jq = $(this);
        opts.delay = 200;
        opts.panelWidth = 800;
        opts.panelHeight = 300;
        opts.mode = "remote";
        opts.url = '/common/searchPlant';
        opts.idField = "plantId";
        opts.textField = "plantName";
        opts.invalidMessage = opts.invalidMessage || "请选择厂商！";
        opts.missingMessage = opts.missingMessage || "请选择厂商！";
        opts.validType = "plantSelect";
        opts.frozenColumns = [];
        opts.editable = true;
        opts.validateOnBlur = true;
        opts.multiSelect = false;
        opts.singleSelect = true;
        opts.rownumbers = false;
        opts.validateOnCreate = opts.validateOnCreate == undefined ? false : opts.validateOnCreate;
        opts.selectOnNavigation = true;
        opts.fitColumns = true;
        opts.onSelect = function (index, row) {
            if (opts.onSelectRow) {
                opts.onSelectRow(index, row);
            }
            jq.combogrid("validate");
            $(jq.next().find("input")).select();
        }
        if (opts.checkbox) {
            opts.frozenColumns = [[{field: '', checkbox: true}]];
        }
        ;
        var beforeLoad = opts.onBeforeLoad;
        opts.onBeforeLoad = function (param) {
            param.type = opts.type || "";
            if (beforeLoad) {
                param = beforeLoad(param);
            }

            return param;
        }

        opts.columns = [[
            {
                field: 'plantName',
                align: 'left',
                title: '厂商名称',
                sortable: false,
                width: 200,
                formatter: function (value, row, index) {
                    var str = "";
                    if (row.isProcessing == 1) {
                        str += '<span class="layui-badge layui-bg-orange">加</span>';
                    }


                    if (row.isSupplier == 1) {
                        str += '<span class="layui-badge layui-bg-green">供</span>';
                    }

                    if (row.isProducer == 1) {
                        str += '<span class="layui-badge">生</span>';
                    }

                    var str1 = '<div>' + value + '</div>';
                    if (str != "") {
                        str1 += "<div style='text-align:right'>" + str + "</div>"
                    }
                    ;
                    return str1;
                }
            },
            {field: 'phone', align: 'left', title: '联系电话', sortable: false, width: 150},
            {field: 'linkman', align: 'left', title: '联系人', sortable: false, width: 150},
            {field: 'area', align: 'left', title: '地区', sortable: false, width: 200},
        ]];

        $.fn.combogrid.call(jq, opts);
        $(jq.next().find("input")).bind("focus", function () {
            $(this).select();
        });
    })
};


$.fn.plantSearchGrid.options = {
    pageSize: 6,
    pageList:[6,10,20,50],
    autoRowHeight: true,
    striped: true,
    loadMsg: '加载中',
    reversed: true,
    pagination: true,
    singleSelect: true,
    ctrlSelect: false,
    checkbox: false,
    allowInput: false,
    required: true,
    tipPosition: 'right',
    labelAlign: 'right',
    onSelectRow: null
}
$.fn.plantSearchGrid.method = {
    getValue: function (jq) {

        var opts = $(this).combogrid('options');
        if (!opts.allowInput) {
            if ($(this).combogrid('getValue') == $(this).combogrid('getText')) {
                return "";
            }
        }
        return $(this).combogrid('getValue');
    }

}

显示效果如下