使用带有JqGrid形式的bootstrap select2

Question

我试图用jqgrid形式实现bootstrap select2,但似乎可以正确.

在jqgrid声明的colmodel我有:

 {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();
                        }
                    }
                },

选项在那里,引导类插入元素,

 <select id="staff" class="select2-offscreen FormElement" role="select"

但我得到的只是选择的空白区域.

见下图.

有人能告诉我为什么会这样,或者告诉我我做错了什么？

谢谢.

Answer 1

我以前不知道select2插件.我试过了,发现没有任何问题.我想你的宽度有问题只是因为使用过大的width函数参数$(element).width(260).select2();.

演示:一个没有Bootstrap,另一个包含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}