将Bootstrap Select2与JqGrid表单一起使用

本文介绍了将Bootstrap Select2与JqGrid表单一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试以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();中使用了width函数的参数太大.

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}