下拉Grid

封装的js代码

(function ($) {
    $.fn.dropDownGrid = function (config) {
        var a = "";
        var options = $.extend(true, {
            jqgridOp: {
                viewrecords: true,
                url: "",
                colNames: [],
                colModel: {},
            },
            dropDown: {
                keyCol: "",
                viewCol: [],
                search: true,
                params: {},
                showRefresh: false,
                extendBtn: false,
                extendBtnIcon: "fa fa-picture-o bigger-110",
                extendBtnFunction: function (keyValue, viewValue) { },
            },
            onSelectRow: function () {
                console.log(a)
            },
        }, config);


        var $this = $(this);
        if ($this.children("div[class='dropdown-menu']").innerHTML) {
            return;
        }
        var randomId = Math.round(Math.random() * 10000);


        var appendV = '<div class="dropdown-menu" "><table id="grid_' + randomId + '"></table><div id="pager_' + randomId + '"></div></div>';
        $this.append(appendV);
        var pager_selector = $this.children("div[class='dropdown-menu']").children("div");
        var grid_selector = $this.children("div[class='dropdown-menu']").children("table");
        grid_selector.jqGrid({
            jsonReader: {
                root: 'Rows',
            },
            height: options.jqgridOp.height || "160",
            width: options.jqgridOp.width || "500",
            viewrecords: options.jqgridOp.viewrecords,
            rowNum: options.jqgridOp.rowNum || 10,
            rowList: options.jqgridOp.rowList || [10, 20, 30],
            pager: pager_selector,
            rownumbers: false,
            rownumWidth: 40,
            sortable: false,
            caption: options.jqgridOp.caption,
            url: options.jqgridOp.url,
            postData: {},
            contentType: 'application/json',
            mtype: "post",
            datatype: 'json',
            beforeRequest: function () {
                grid_selector.jqGrid("setGridParam", { postData: options.dropDown.params });
            },
            onSelectRow: function (id) {
                var value = "";
                var RowData = grid_selector.jqGrid('getRowData', id);
                for (var i = 0; i < options.dropDown.viewCol.length; i++) {
                    value += RowData[options.dropDown.viewCol[i]] + '|';
                }
                $this.children("input[type='hidden']").val(grid_selector.getCell(id, options.dropDown.keyCol));
                $this.children("input[type='text']").val(value.substring(0, value.lastIndexOf('|')));
                $this.children("input[type='text']").change();
            },


            colNames: options.jqgridOp.colNames,
            colModel: options.jqgridOp.colModel,
        });
        if (options.dropDown.search) {
            grid_selector.jqGrid('filterToolbar', { searchOnEnter: true });
        }
        if (options.dropDown.showRefresh) {
            $this.on('show.bs.dropdown', function () {
                grid_selector.trigger("reloadGrid");
            });
        }
        $this.find(".dropdown-menu").click(function (e) {
            if (e.target.cellIndex == undefined || e.target.cellIndex == "") {
                e.stopPropagation();
                return;
            }
        });
        grid_selector.closest(".ui-jqgrid-bdiv").css({ "overflow-x": "hidden" });
        grid_selector.closest(".ui-jqgrid-bdiv").css({ 'overflow-y': 'scroll' });
    };
})(jQuery);

html页面

 <div class="dropdown input-group col-xs-10 col-sm-5" id="Ent_Qualif" style="display:inline-block;width:375px">
                                                <span class="Formspan" style="width:60px">企业资质</span>
                                                <input type="text" class="dropdown-toggle" data-toggle="dropdown" style="width:315px" id="Ent_Qualif_No_" name="Ent_Qualif_No" />
                                            </div>

调用

$("#Ent_Qualif").dropDownGrid({
                jqgridOp: {
                    page: 1,
                    url: "../ashx/Decl/Dcl_Ent_Limit.ashx",
                    colNames: ['', '资质编号', '类别代码', '类别名称', '企业代码', '企业名称'],
                    colModel: [
                        { name: 'Ent_Limit_Id', width: 5, sortable: false, editable: false, hidden: true },
                        { name: 'Ent_Qualif_No', index: 'Ent_Qualif_No', sortable: false, width: 10, },
                        { name: 'Ent_Qualif_Type_Code', index: 'Ent_Qualif_Type_Code', sortable: false, width: 10, editable: false },
                        { name: 'Ent_Qualif_Name', index: 'Ent_Qualif_Name', sortable: false, width: 20, editable: false },
                        { name: 'Ent_Org_Code', index: 'Ent_Org_Code', sortable: false, width: 10, editable: false },
                        { name: 'Ent_Name', index: 'Ent_Name', sortable: false, width: 20, editable: false },
                    ]
                },
                dropDown: {
                    keyCol: "Ent_Limit_Id",
                    viewCol: ["Ent_Qualif_No", "Ent_Qualif_Type_Code", "Ent_Qualif_Name", "Ent_Org_Code", "Ent_Name"],
                    search: false,
                    extendBtn: false,
                    params: {
                        Action: "Get_Limit",
                        Ckey: APP.getValue('Ckey'),
                        Comsite: APP.getValue('Comsite')
                    }
                },
            });