在 JqGrid 表单中使用 bootstrap select2 [英] Using bootstrap select2 with JqGrid form
问题描述
我正在尝试使用 jqgrid 形式实现 bootstrap select2,但似乎是正确的.
I am trying to implement bootstrap select2 with jqgrid form but can seem to get it right.
关于 jqgrid 声明的 colmodel 我有:
on the colmodel of the jqgrid declaration I have:
{name: 'staff', index: 'staff', width: 31, formoptions: {elmprefix: '(*) '}, editable: true, editrules: {required: true}, edittype: 'select',
editoptions: {value: staff,
dataInit: function(element) {
$(element).width(260).select2();
}
}
},
选项在那里,引导类被插入到元素中,
The options are there and bootstrap classes are inserted into the element,
<select id="staff" class="select2-offscreen FormElement" role="select"
但我得到的只是选择的空白空间.
but all I am getting is a blank space for the select.
见下图.
谁能告诉我为什么会发生这种情况或告诉我我做错了什么?
Can someone tell me why this is happening or tell me what I am doing wrong?
谢谢.
推荐答案
我不知道 select2 之前的插件.我试过了,没有发现任何问题.我想你有宽度问题只是因为在 $(element).width(260).select2();
.
I didn't known select2 plugin before. I tried it and can't found any problems. I suppose that you have problems with the width just because use used too large parameter of width
function in $(element).width(260).select2();
.
演示:一个,没有 Bootstrap 和 另一个 包含 Bootstrap 3.0.0 没有问题.选择如下图所示
The demos: one without Bootstrap and another one with including of Bootstrap 3.0.0 works without problems. The select looks like on the picture below
我在演示中使用过
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 以提高可见性(根据我个人的喜好)
and added the following CSS to improve the visibility (on my personal taste)
.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:
Additionally I added some more CSS in the demo which used Bootstrap 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}
这篇关于在 JqGrid 表单中使用 bootstrap select2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!