【发布时间】：2016-04-22 17:08:55
【问题描述】：
我正在使用 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
【问题讨论】：
-
我从未使用过 bootstrap-multiselect，但使用 Erichynd 的 multiselect 和 JQGrid 并且效果很好。你可能想看一个例子here
标签： javascript jquery css jqgrid bootstrap-multiselect