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