jQGrid 열 선택기 모달 오버레이

Question

이 example을 살펴보면 검색 버튼을 클릭하면 뒤쪽에 검은 색 오버레이가있는 모달 양식이 표시됩니다. 이제 Column Chooser 버튼을 클릭하면 모달 형식이 나타나지만 그 뒤에는 오버레이가 표시되지 않습니다.

제 질문은 : 어떻게 열 선택기 팝업 창 뒤에 어두운 오버레이가 나타나게합니까? 이 코드에

jqModal : true, 

:

Answer 1

현재의 option이 서류 미 비자 columnChooser :

$(this).jqGrid('columnChooser', {modal: true}); 

The demo이 것을 입증하십시오.

$.extend(true, $.jgrid.col, { 
    modal: true 
}); 

최근 나는 columnChooser의 약간의 기능을 확장 할 수 the suggestion을 게시,하지만 a part 변경이있는 jqGrid의 현재 코드입니다 : 하나는 너무 $.jgrid.col의와 관련하여 columnChooser에 대한 기본 매개 변수를 설정할 수 있습니다. 그럼에도 새 버전에서는 dialog_opts 옵션과 관련하여 훨씬 더 많은 jQuery UI Dialog 옵션을 설정할 수 있습니다. 예를 들어 다음의 사용은

$(this).jqGrid('columnChooser', { 
    dialog_opts: { 
     modal: true, 
     minWidth: 470, 
     show: 'blind', 
     hide: 'explode' 
    } 
}); 

내가 방금 columnChooser의 표준 구현을 덮어 쓸 수 있습니다 제안 전체 기능을 사용하려면 가능합니다. 하나는 jquery.jqGrid.min.js의 원래 최소화 버전을 계속 사용할 수있는 경우는 다음 코드

$.jgrid.extend({ 
    columnChooser : function(opts) { 
     var self = this; 
     if($("#colchooser_"+$.jgrid.jqID(self[0].p.id)).length) { return; } 
     var selector = $('<div id="colchooser_'+self[0].p.id+'" style="position:relative;overflow:hidden"><div><select multiple="multiple"></select></div></div>'); 
     var select = $('select', selector); 

     function insert(perm,i,v) { 
      if(i>=0){ 
       var a = perm.slice(); 
       var b = a.splice(i,Math.max(perm.length-i,i)); 
       if(i>perm.length) { i = perm.length; } 
       a[i] = v; 
       return a.concat(b); 
      } 
     } 
     opts = $.extend({ 
      "width" : 420, 
      "height" : 240, 
      "classname" : null, 
      "done" : function(perm) { if (perm) { self.jqGrid("remapColumns", perm, true); } }, 
      /* msel is either the name of a ui widget class that 
       extends a multiselect, or a function that supports 
       creating a multiselect object (with no argument, 
       or when passed an object), and destroying it (when 
       passed the string "destroy"). */ 
      "msel" : "multiselect", 
      /* "msel_opts" : {}, */ 

      /* dlog is either the name of a ui widget class that 
       behaves in a dialog-like way, or a function, that 
       supports creating a dialog (when passed dlog_opts) 
       or destroying a dialog (when passed the string 
       "destroy") 
       */ 
      "dlog" : "dialog", 

      /* dlog_opts is either an option object to be passed 
       to "dlog", or (more likely) a function that creates 
       the options object. 
       The default produces a suitable options object for 
       ui.dialog */ 
      "dlog_opts" : function(opts) { 
       var buttons = {}; 
       buttons[opts.bSubmit] = function() { 
        opts.apply_perm(); 
        opts.cleanup(false); 
       }; 
       buttons[opts.bCancel] = function() { 
        opts.cleanup(true); 
       }; 
       return $.extend(true, { 
        "buttons": buttons, 
        "close": function() { 
         opts.cleanup(true); 
        }, 
        "modal" : opts.modal ? opts.modal : false, 
        "resizable": opts.resizable ? opts.resizable : true, 
        "width": opts.width+20, 
        resize: function (e, ui) { 
         var $container = $(this).find('>div>div.ui-multiselect'), 
          containerWidth = $container.width(), 
          containerHeight = $container.height(), 
          $selectedContainer = $container.find('>div.selected'), 
          $availableContainer = $container.find('>div.available'), 
          $selectedActions = $selectedContainer.find('>div.actions'), 
          $availableActions = $availableContainer.find('>div.actions'), 
          $selectedList = $selectedContainer.find('>ul.connected-list'), 
          $availableList = $availableContainer.find('>ul.connected-list'), 
          dividerLocation = opts.msel_opts.dividerLocation || $.ui.multiselect.defaults.dividerLocation; 

         $container.width(containerWidth); // to fix width like 398.96px      
         $availableContainer.width(Math.floor(containerWidth*(1-dividerLocation))); 
         $selectedContainer.width(containerWidth - $availableContainer.outerWidth() - ($.browser.webkit ? 1: 0)); 

         $availableContainer.height(containerHeight); 
         $selectedContainer.height(containerHeight); 
         $selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1)); 
         $availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1)); 
        } 
       }, opts.dialog_opts || {}); 
      }, 
      /* Function to get the permutation array, and pass it to the 
       "done" function */ 
      "apply_perm" : function() { 
       $('option',select).each(function(i) { 
        if (this.selected) { 
         self.jqGrid("showCol", colModel[this.value].name); 
        } else { 
         self.jqGrid("hideCol", colModel[this.value].name); 
        } 
       }); 

       var perm = []; 
       //fixedCols.slice(0); 
       $('option:selected',select).each(function() { perm.push(parseInt(this.value,10)); }); 
       $.each(perm, function() { delete colMap[colModel[parseInt(this,10)].name]; }); 
       $.each(colMap, function() { 
        var ti = parseInt(this,10); 
        perm = insert(perm,ti,ti); 
       }); 
       if (opts.done) { 
        opts.done.call(self, perm); 
       } 
      }, 
      /* Function to cleanup the dialog, and select. Also calls the 
       done function with no permutation (to indicate that the 
       columnChooser was aborted */ 
      "cleanup" : function(calldone) { 
       call(opts.dlog, selector, 'destroy'); 
       call(opts.msel, select, 'destroy'); 
       selector.remove(); 
       if (calldone && opts.done) { 
        opts.done.call(self); 
       } 
      }, 
      "msel_opts" : {} 
     }, $.jgrid.col, opts || {}); 
     if($.ui) { 
      if ($.ui.multiselect) { 
       if(opts.msel == "multiselect") { 
        if(!$.jgrid._multiselect) { 
         // should be in language file 
         alert("Multiselect plugin loaded after jqGrid. Please load the plugin before the jqGrid!"); 
         return; 
        } 
        opts.msel_opts = $.extend($.ui.multiselect.defaults,opts.msel_opts); 
       } 
      } 
     } 
     if (opts.caption) { 
      selector.attr("title", opts.caption); 
     } 
     if (opts.classname) { 
      selector.addClass(opts.classname); 
      select.addClass(opts.classname); 
     } 
     if (opts.width) { 
      $(">div",selector).css({"width": opts.width,"margin":"0 auto"}); 
      select.css("width", opts.width); 
     } 
     if (opts.height) { 
      $(">div",selector).css("height", opts.height); 
      select.css("height", opts.height - 10); 
     } 
     var colModel = self.jqGrid("getGridParam", "colModel"); 
     var colNames = self.jqGrid("getGridParam", "colNames"); 
     var colMap = {}, fixedCols = []; 

     select.empty(); 
     $.each(colModel, function(i) { 
      colMap[this.name] = i; 
      if (this.hidedlg) { 
       if (!this.hidden) { 
        fixedCols.push(i); 
       } 
       return; 
      } 

      select.append("<option value='"+i+"' "+ 
          (this.hidden?"":"selected='selected'")+">"+colNames[i]+"</option>"); 
     }); 
     function call(fn, obj) { 
      if (!fn) { return; } 
      if (typeof fn == 'string') { 
       if ($.fn[fn]) { 
        $.fn[fn].apply(obj, $.makeArray(arguments).slice(2)); 
       } 
      } else if ($.isFunction(fn)) { 
       fn.apply(obj, $.makeArray(arguments).slice(2)); 
      } 
     } 

     var dopts = $.isFunction(opts.dlog_opts) ? opts.dlog_opts.call(self, opts) : opts.dlog_opts; 
     call(opts.dlog, selector, dopts); 
     var mopts = $.isFunction(opts.msel_opts) ? opts.msel_opts.call(self, opts) : opts.msel_opts; 
     call(opts.msel, select, mopts); 
     // fix height of elements of the multiselect widget 
     var resizeSel = "#colchooser_"+$.jgrid.jqID(self[0].p.id), 
      $container = $(resizeSel + '>div>div.ui-multiselect'), 
      $selectedContainer = $(resizeSel + '>div>div.ui-multiselect>div.selected'), 
      $availableContainer = $(resizeSel + '>div>div.ui-multiselect>div.available'), 
      containerHeight, 
      $selectedActions = $selectedContainer.find('>div.actions'), 
      $availableActions = $availableContainer.find('>div.actions'), 
      $selectedList = $selectedContainer.find('>ul.connected-list'), 
      $availableList = $availableContainer.find('>ul.connected-list'); 
     $container.height($container.parent().height()); // increase the container height 
     containerHeight = $container.height(); 
     $selectedContainer.height(containerHeight); 
     $availableContainer.height(containerHeight); 
     $selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1)); 
     $availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1)); 
     // extend the list of components which will be also-resized 
     selector.data('dialog').uiDialog.resizable("option", "alsoResize", 
      resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect'); 
    } 
}); 

그냥 $(this).jqGrid('columnChooser'); 될 수 있습니다 사용하는 코드를 포함하여이 작업을 수행 할 수 있습니다. 함께 모든 기본 설정과 함께 그것은

$.extend(true, $.ui.multiselect, { 
    locale: { 
     addAll: 'Make all visible', 
     removeAll: 'Hidde All', 
     itemsCount: 'Avlialble Columns' 
    } 
}); 
$.extend(true, $.jgrid.col, { 
    width: 450, 
    modal: true, 
    msel_opts: {dividerLocation: 0.5}, 
    dialog_opts: { 
     minWidth: 470, 
     show: 'blind', 
     hide: 'explode' 
    } 
}); 
$grid.jqGrid('navButtonAdd', '#pager', { 
    caption: "", 
    buttonicon: "ui-icon-calculator", 
    title: "Choose columns", 
    onClickButton: function() { 
     $(this).jqGrid('columnChooser'); 
    } 
}); 

The demo 같은 접근 방식을 보여줍니다. 변화의 가장 큰 장점 - 정말 크기 조정 열 선택기 : 갱신

: 나는 2014 년 말부터 시작하여 개발할있는 jqGrid의Free jqGrid 포크, 원인의 columnChooser의 수정 된 코드가 포함되어 있습니다.

Answer 2

그냥 코드를 통해 찾고,이 줄을 추가하려고

$grid.jqGrid('navButtonAdd', '#pager', { 
      caption: "", 
      buttonicon: "ui-icon-calculator", 
      title: "Choose columns", 
      onClickButton: function() { 
.... 

을 다음과 같이 :

$grid.jqGrid('navButtonAdd', '#pager', { 
      caption: "", 
      buttonicon: "ui-icon-calculator", 
      title: "Choose columns", 
      jqModal : true, 
      onClickButton: function() { 
.... 

Answer 3

모바일 장치에서 코드를 시도하는 중 다음 오류가 발생합니다.

Result of expression 'selector.data('dialog').uiDialog' [undefined] is not an object. 

오류는 다음 코드 줄을 가리 킵니다.

selector.data('dialog').uiDialog.resizable("option", "alsoResize", resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect'); 

코드를 검사 할 때 데이터 객체에 uiDialog가 없다는 것을 알았습니다.