使用带有 JqGrid 表单的 bootstrap select2

Posted 2023-05-07

【中文标题】使用带有 JqGrid 表单的 bootstrap select2

【英文标题】：Using bootstrap select2 with JqGrid form

【发布时间】：2013-10-24 02:39:36

【问题描述】：

我正在尝试使用 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"

但我得到的只是选择的空白。

见下图。

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

谢谢。

【问题讨论】：

bootstrap 和 jQgrid 一起工作存在很多 css 问题。在这里查看这篇文章，它曾经帮助过我一次：***.com/questions/14954587/… 你也可以在开发人员工具中使用 css 类来检查究竟是什么导致了问题。

【参考方案1】：

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

演示：one 没有 Bootstrap 和 another one 包括 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

【讨论】：

我已经尝试了你在这里所做的一切。我什至已经更新到最新的引导程序，但它仍然无法正常工作。检查元素后，我意识到引导程序假设插入了一个适合选择顶部的附加 div 元素。这不会发生在我身上。您能指导我了解为什么会这样吗？

@pundit：您应该提供一个演示来演示您遇到的问题。你能得到我的例子并修改它的代码，以便人们可以看到问题吗？

你能告诉我你用的是什么版本的jqgrid吗？

@pundit：例如，如果您从我的演示 (this one) 打开一个源代码，您会看到我包含了 http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js 和 jqGrid 4.5.4 的其他文件。

好的，解决了这个问题......非常感谢奥列格。我不得不更新 jqGrid。但是我无法选择多个选项......我想我必须做更多的研究。

【参考方案2】：

我尝试和你一样直接在dataInit函数中使用select2（不同的是我使用的是ajax数据源），看起来不错但是不能正常工作：

值无法发送到服务器。 选择一行 -> 编辑，但 select2 未使用旧值初始化。

最后我放弃了这个方法，尝试使用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,
        ,
,

我定义了三个函数：

myselect2elem(value, options) // 初始化一个公共元素 myselect2value(elem, operation, value) // 获取|设置元素的值 myselect2init(width,holder,url,opt,cel_name_id,cel_name) //初始化元素使用select2

详情

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 的回答。 我希望我的回答可以帮助到其他人

【讨论】：

它的答案非常棒。但我只有一个问题，每当我选择并单击其他任何地方时，它都会用 id 替换文本。您是否遇到过这个问题？