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

创建的the answer进行比较

如果您确实需要z-index: 500992添加/编辑对话框，则必须增加z-index的{{1}}，用于select2的下拉菜单（按使用情况{{1 }} 例如）。您已使用选项.select2-dropdown，它将自定义类添加到下拉菜单中。您可以将选项修改为

.select2-dropdown { z-index: 500993; }

并添加一个CSS规则：

dropdownCssClass: 'ui-widget ui-jqdialog'

应该解决你的问题。

如何让jQuery select2在jQgrid中填充

1 个答案: