jQuery select2를 jQgrid에 채우는 방법

Question

jQgrid를 생성하는 데 다음 코드가 있지만 select 아이콘을 클릭하면 select2 목록이 비어 있습니다. select2 코드를 제거하면 목록이 잘 채워집니다.

jQuery를 1.11.3 있는 jqGrid 무료 4.13 내가 선택을 위해이 4.0.3 단지 다른 파일이 불필요한 될 것 같다 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 옵션입니다 (전체) 선택 2 . 데모가 작동하도록하려면 제거 만하면됩니다. 당신이 정말로 추가/편집 대화 상자에 대한 z-index: 500992이 필요한 경우 다음 (예를 들어, 사용 .select2-dropdown { z-index: 500993; }에 의해)을 z-index 선택 2의 드롭 다운 메뉴에 사용 .select2-dropdown의 증가가, the answer

생성 the demo와 비교. 드롭 다운 메뉴에 맞춤 클래스를 추가하는 옵션 인 dropdownCssClass: 'ui-widget ui-jqdialog'을 이미 사용하고 있습니다. 당신은

dropdownCssClass: "ui-widget ui-jqdialog mycustomclass" 

에 옵션을 수정하고 또 하나의 CSS 규칙 추가 :

.mycustomclass { z-index: 500993; } 

그것은 당신의 문제를 해결해야합니다.