我不知道select2 http://ivaynberg.github.io/select2/之前的插件。我尝试了一下,没有发现任何问题。我想你对宽度有问题只是因为 use 使用了太大的参数width
函数于$(element).width(260).select2();
.
演示:one http://www.ok-soft-gmbh.com/jqGrid/BootsrtapSelectInEditing.htm没有引导程序和另一个 http://www.ok-soft-gmbh.com/jqGrid/BootsrtapSelectInEditing1.htm包含 Bootstrap 3.0.0 可以正常工作。选择如下图所示
我在演示中使用了
formatter: "select", edittype: "select",
editoptions: {
value: "FE:FedEx;TN:TNT;IN:Intim",
defaultValue: "Intime",
dataInit: function(element) {
$(element).width(122).select2({
// add "ui-widget" class to have the same font-family like in
// jQuery UI Theme
// add "ui-jqdialog" class to have font-size:11px like in other
// items of jqGrid form
dropdownCssClass: "ui-widget ui-jqdialog"
});
}
},
stype: "select",
searchoptions: {
value: "FE:FedEx;TN:TNT;IN:Intim",
defaultValue: "Intime",
dataInit: function(element) {
$(element).width(122).select2({
// add "ui-widget" class to have the same font-family like in
// jQuery UI Theme
// add "ui-jqdialog" class to have font-size:11px like in other
// items of jqGrid form
dropdownCssClass: "ui-widget ui-jqdialog"
});
}
}
并添加了以下 CSS 来提高可见性(根据我个人的口味)
.ui-jqdialog .select2-container .select2-choice {
height: auto;
padding-top: 1px;
padding-left: 0.2em;
padding-bottom: 2px;
line-height: 15px;
}
.ui-jqdialog .select2-container .select2-choice .select2-arrow b {
background-position: 0 -4px;
}
.ui-jqdialog.select2-drop { padding: 0px; }
.ui-jqdialog .select2-results .select2-result-label {
padding: 2px;
}
另外,我在使用 Bootstrap CSS 的演示中添加了更多 CSS:
.ui-jqgrid table {border-collapse: separate}
.ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-pg-selbox {height: 17px}
.ui-jqgrid .ui-pg-table {padding-bottom: 0}