[英]Using bootstrap select2 with JqGrid form
我试图用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"
但我得到的只是选择的空白区域。
见下图。
有人能告诉我为什么会这样,或者告诉我我做错了什么?
谢谢。
我以前不知道select2插件。 我试过了,发现没有任何问题。 我想你的宽度有问题,因为在$(element).width(260).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}
我尝试直接在dataInit
函数中使用select2(不同之处在于我使用ajax数据源),它看起来不错但无法正常工作:
最后,我放弃了这个方法并尝试使用edittype:'custom'
colModel:[
{name:'model_id',label:'mID',
hidden: true,
hidedlg: true, // the hidden model_id column
search: false, // used for offer id info to select2
},
{name:'model',label:'model',width:150,
editable:true,
edittype:'custom',
editoptions:{
custom_element: myselect2elem,
custom_value: myselect2value,
dataInit: myselect2init('180','chose model','search/servermodel','model_id','model'),
},
editrules:{
edithidden: true,
required: true,
},
},
我定义了三个函数:
细节
function myselect2elem(value, options) {
var el = document.createElement("select");
el.value = value;
return el;
}
function myselect2value(elem, operation, value) {
if(operation === 'get') {
return $(elem).val();
} else if(operation === 'set') { // this doesn't work,
$(elem).value=value; // I don't know whether have side effect
}
}
function myselect2init(width,holder,url,cel_name_id,cel_name){
var option = {
width: width,
placeholder: holder,
ajax: {
url: url,
/*
the other ajax configuration option that only selet2 used
*/
},
}
return function(element) {
$(element).children(".customelement").select2(option)
// do the init 'set' operation that previous function should do
selRowId = $(this).jqGrid ('getGridParam', 'selrow'),
celId = $(this).jqGrid ('getCell', selRowId, cel_name_id);
celValue = $(this).jqGrid ('getCell', selRowId, cel_name);
if (celValue){
var newOption = new Option(celValue, celId, true, true);
$(element).children(".customelement").append(newOption).trigger('change');
}
}
}
感谢您对此的疑问,感谢@Oleg的回答。 我希望我的回答可以帮助其他人
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.