如何让 jQuery select2 在 jQgrid 中填充

Question

我有以下代码来生成 jQgrid，但是当我单击添加图标时，select2 列表是空白的。如果我删除 select2 代码，列表会正常填充。

jQuery 1.11.3 免费的 jQgrid 4.13 select2(full) 4.0.3 我只有 select 的其他文件是 css

<table id="csstsoservicebulletinassignment"></table>
<div id="csstsoservicebulletinassignmentpager"></div>


<script type="text/javascript">
//var serialnumbervalidation = false;   
$(document).ready(function(){       
    var selID = "";
    var temp = "";
    var sourcevalue = "";
    var requestedchangelink = "";
    $("#csstsoservicebulletinassignment").jqGrid({
    url:'/QMSWebApp/CSSTSOControllerServlet?lifecycle=loadservicebulletinassignmentbodysection',
    editurl:'/QMSWebApp/CSSTSOControllerServlet?lifecycle=editservicebulletinassignmentbodysection',
    datatype: "json",
    height: "auto",
    colNames:['Index#','CO#','iService Bulletin#','Service Bulletin#'],
    colModel:[
        {name:'id', index:'id', width:60, hidden: true, editable: true, editoptions:{ readonly:'readonly'}, editrules:{edithidden:true}, formoptions:{rowpos:1, colpos:1,label:"Index#:"}},
        {name:'cono', index:'cono', width:60, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:2, colpos:1,label:"CO#:"}},
        {name:'sbnoindx', index:'sbnoindx', width:60, hidden: true, editable: true,
         editrules:{edithidden:true}, formoptions:{rowpos:3, colpos:1,label:"Service Bulletin#:"},
          edittype: "select",
           editoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=servicebulletinoptions',
                    selectFilled: function (options) {
                        $(options.elem).width(122).select2({
                            dropdownCssClass: 'ui-widget ui-jqdialog',
                            //width: '100%'
                        });
           }},
           stype: "select",
           searchoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=servicebulletinoptions',
                selectFilled: function (options) {
                        $(options.elem).width(122).select2({
                            dropdownCssClass: 'ui-widget ui-jqdialog',
                            //width: '100%'
                        });    
           }
        }},
        {name:'sbnolink', index:'sbnolink', width:500, hidden: false},
        ],
        onSelectRow: oSelect,
        rowNum:10,
        rowList:[10,15,20,25,30],
        loadonce: true,
        pager: '#csstsoservicebulletinassignmentpager',
        viewrecords: true,
        gridview: true,
        loadComplete: lComplete,
        caption:"Service Bulletin Assignment"

    });
    $("#csstsoservicebulletinassignment").jqGrid('navGrid','#csstsoservicebulletinassignmentpager',
        {edit:false,add:true,del:true,search:true,view:false,
        beforeRefresh: function(){
            $("#csstsoservicebulletinassignment").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
            }},
        {url:'/QMSWebApp/CSSTSOControllerServlet?lifecycle=editservicebulletinassignmentbodysection',
         recreateForm: true,
         width: 400,
         zIndex: 500992,
         viewPagerButtons: false,
         beforeShowForm: bsEditForm,
         afterShowForm: asEditForm, 
         checkOnSubmit: false,
         afterSubmit: asubEditForm,
         },
        {recreateForm: true,
        zIndex: 500992,
         beforeInitData: biAddForm,
         beforeShowForm: bsAddForm,
         afterShowForm: asAddForm,
         beforeSubmit: bsubAddForm,
         checkOnSubmit: false,
         afterSubmit: asubAddForm,
         afterComplete: afComp,
         width: 400,
         },
        {zIndex: 500992},
        {zIndex: 500992},
        {recreateForm: true,
        zIndex: 500992,
         width: 400,
         viewPagerButtons: false 
         }
    );

    function lComplete(data){

        $('.viewservicebulletincontext').on("click", function(){

            var servicebulletinno = this.getAttribute("data-servicebulletin");
            progress();
            setTimeout(function(){
                $('.miscdisplay2').load("/QMSWebApp/CSSTSOControllerServlet",
                {lifecycle:"viewservicebulletincontext",servicebulletinno:servicebulletinno});
                $('.miscdisplay2').show("slide", { direction: "right" }, 1000);     
            },100);

        });


        hideProgressDisplay();           
    };
    function oSelect(id){
        //$("#csstsoservicebulletinassignment").setColProp('twotype', { editoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=twotypeoptions'}});       

    };

    function bsEditForm(formId){

        $('#tr_id', formId).hide();
        $('#tr_cono', formId).hide();
        $('#tr_sbnolink', formId).hide();

    }
    function asEditForm(formId){


    }
    function asubEditForm(response, postdata){
        return [true,"Ok"];

    }
    function biAddForm(formId){
        //$("#csstsoservicebulletinassignment").setColProp('sbnoindx', { editoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=servicebulletinoptions', selectFilled: function(options){$(options.elem).select2({dropdownCssClass: "ui-widget ui-jqdialog",width: "100%"});}}});        

    };
    function bsAddForm(formId){

        $('#tr_id', formId).hide();
        $('#tr_cono', formId).hide();
        $('#tr_sbnolink', formId).hide();

    }

    function asAddForm(formId){

    }

    function bsubAddForm(postdata, formid){
                        return [true,"Ok"];
        //}

    }
    function afComp(response,postdata,formId){


    }
    function asubAddForm(response, postdata){

        var res = $.parseJSON(response.responseText);
        if(res){
            if(!res.errorCode){

                return [false,res.message];

            }
            else{

                return [true,"Ok"];
            }
        }
        else{

            return [true,"Ok"];
        }

    }

    $('.csstsoservicebulletinassignmentFormClose').on("click", function(){

        //$('.miscdisplay2').hide("slide", { direction: "right" }, 1000);
        $('.miscdisplay').hide("slide", { direction: "right" }, 1000);

    });     

});

Answer 1

您使用了 zIndex: 500992 选项，这似乎是不需要的。您可以删除它以使您的演示正常运行。比较 the demo created for

如果你真的需要z-index: 500992用于Add/Edit对话框，那么你必须增加.select2-dropdown的z-index，用于select2的下拉菜单（通过例如用法 .select2-dropdown { z-index: 500993; }）。您已经使用了选项 dropdownCssClass: 'ui-widget ui-jqdialog'，它将自定义类添加到下拉菜单中。可以修改选项为

dropdownCssClass: "ui-widget ui-jqdialog mycustomclass"

并添加一个 CSS 规则：

.mycustomclass { z-index: 500993; }

它应该可以解决您的问题。

如何让 jQuery select2 在 jQgrid 中填充

How to get jQuery select2 to Populate in jQgrid

jquery

jqgrid

select2