Question

我正在使用jqGrid 5.0.1并尝试使用bootstrap -multiselect为列实现自定义过滤器。看起来CSS与jQgrid存在一些冲突，因为我可以看到默认值或以编程方式选择一个，但是当我点击过滤器时我看不到下拉列表。使用检查器它似乎正在工作，但它只是不可见..一些溢出或z-index错误。任何人都可以帮我解决这个问题吗？

    $("#jqGrid").jqGrid({
        url: 'assets/static_data/data.json',
        //mtype: "GET",
        datatype: "json",
        styleUI: 'Bootstrap',
        //shrinkToFit: true,
        multiselect: true, // column with checkboxes
        autowidth: true,
        colNames: ['Order ID', 'Ship Name', 'Freight'],
        colModel: [
            {
                //sorttype: 'integer',
                name: 'OrderID',
                key: true,
                width: 75,
                editable: true,
            },
            {
                name: 'ShipName',
                width: 150,
                stype: "select",

                searchoptions: {

                    // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                    // use it to place a third party control to customize the toolbar
                    dataInit: function (element) {

                        console.log(element);
                        var options = [
                            {label: 'Option 1', title: 'Option 1', value: '1'},
                            {label: 'Option 2', title: 'Option 2', value: '2'},
                            {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
                            {label: 'Option 4', title: 'Option 4', value: '4'},
                            {label: 'Option 5', title: 'Option 5', value: '5'},
                            {label: 'Option 6', title: 'Option 6', value: '6'}
                        ];

                        $(element).multiselect('dataprovider', options);
                        //$(element).multiselect('setOptions', options);
                        //$(element).multiselect('rebuild');
                    },
                }
            },
            {
                name: 'Freight',
                sorttype: 'number',
                width: 150
            },

        ],
        loadonce: true,
        viewrecords: true,
        width: 780,
        height: 250,
        rowNum: 10,
        pager: "#jqGridPager",

    }); // end jqGrid

Answer 1

使用：

multiselect : true,
multiselectWidth : 50

jqGrid + bootstrap-multiselect可见性问题

1 个答案: