jqGrid 4.8.2 Изменение ширины сетки после выполнения столбцаChooser

Question

Я использую jqGrid 4.8.2 и настроил сетку с фиксированной шириной. Но когда я изменяю отображаемые столбцы с помощью columnChooser, ширина сетки корректируется до общей ширины всех столбцов, а горизонтальная прокрутка отсутствует. Я попытался сбросить ширину в параметре 'done' columnChooser, но он не работает. После некоторой отладки кажется, что происходит изменение размера после завершения «done» и после закрытия диалогового окна. Я создал кнопку, чтобы сбросить ширину вручную, и это работает отлично, поэтому я знаю, что может произойти сброс ширины. Я просто не знаю, какое событие использовать для его запуска.

var defaultColModel = 
[ 
    {name:'REQUESTEDDATE' 
     ,index:'r.requestedDate' 
     ,label:'Request Date' 
     ,sorttype:"date" 
     ,template: "date" 
     ,search:true 
     ,width:100 
     ,hidden:false 
    }, 
    {name:'VENDORNAME' 
     ,index:'v.companyName' 
     ,label:'Vendor' 
     ,search:true 
     ,stype:'text' 
     ,width:150 
     ,formatter:'showlink' 
     ,formatoptions:{baseLinkUrl:'<cfoutput>#application.rootpath#</cfoutput>', addParam: '&page=dsp_request#vendorT', idName:'REQUESTID'} 
     ,hidden:false 
    }, 
    {name:'VENDORID' 
     ,index:'r.vendorID' 
     ,label:'Vendor ID' 
     ,search:true 
     ,stype:'text' 
     ,width:100 
     ,hidden:true 
    }, 
    {name:'VENDORCONTACT' 
     ,index:'vendorContact' 
     ,label:'Vendor Contact' 
     ,stype:'text' 
     ,search:true 
     ,width:100 
     ,hidden:true 
    } // there are many more cols. Just showing a few to illustrate how they are defined. 
] 
var myGrid = jQuery("#contract_grid").jqGrid({ 
    url:   'cfc/com_ajxRequestNew.cfc?method=getReqJSON&returnformat=json', 
    datatype:  'json', 
    postData:  {filters: myFilters}, 
    mtype:   'POST', 
    search:   true, 
    colModel:  defaultColModel, 
    gridview:  false, //added for IE 
    altRows:  true, 
    emptyrecords: 'NO DATA FOUND', 
    height:   400, 
    width:   1200, 
    sortname:  lastSortName, 
    sortorder:  lastSortOrder, 
    page:   lastPage, 
    pager:   jQuery('#report_pager'), 
    rowNum:   lastRowNum, 
    rowList:  [10,20,50,100], 
    viewrecords: true, 
    clearSearch: false, 
    caption:  "Contracts Dashboard", 
    sortable:  true, 
    shrinkToFit: false, 
    excel:   true, 
    ajaxSelectOptions: {type: "GET"}, 
    gridComplete: function() {//removed code for simplicity} 
}); 
jQuery("#contract_grid").navGrid('#report_pager',{ 
    edit:false, 
    add:false, 
    del:false, 
    search:false, 
    refresh:false 
}).navButtonAdd("#report_pager",{ 
    caption: "Columns", 
    buttonicon: "ui-icon-calculator", 
    title: "Select and Reorder Columns", 
    jqModal: true, 
    onClickButton: function(e){ 

     $('#contract_grid').jqGrid('columnChooser', { 
      dialog_opts: { 
       modal: true, 
       minWidth: 470, 
       show: 'blind', 
       hide: 'explode' 
      }, 
      done : function (perm) { 
       if (perm) { 
        // "OK" button are clicked 
        $('#contract_grid').jqGrid("remapColumns", perm, true); 

        // **UPDATED WORKING CODE**get the width set for the grid 
        var gwdth = $('#contract_grid').jqGrid("getGridParam","width"); 
       // set the tblwidth so the grid does not get resized 
        $('#contract_grid').setGridParam({tblwidth:gwdth}); 

       } else { 
        // we can do some action in case of "Cancel" button clicked 
       } 
      } 
     }); 
    } 

}); 

Answer 1

Вы не разместили самую важную часть вашего кода: colModel. По крайней мере, определение столбца, которое должно быть «фиксированным», важно знать.

Столбец, который должен иметь фиксированную ширину, должен иметь fixed: true. Это предотвратит изменение ширины.

ОБНОВЛЕНО: Я до сих пор не уверен, что вы хотите реализовать, но я не знаю, специфическое поведение jqGrid 4.8.2, потому что развивать альтернативную вилку free jqGrid, которые вы можете попробовать только в том числе URL в коде на GitHub (см. here).

В целом существуют два важных внутренних параметра: tblwidth и width. tblwidth - ширина тела сетки (<table>) и существуют width, который является всего ширина сетки: ширина наружного div. Я полагаю, что jqGrid 4.8.2 делает неправильный выбор в вашем случае между tblwidth и width. Я бы порекомендовал вам попробовать заменить var gwdth = $('#contract_grid').jqGrid("getGridParam","width"); внутри кода done обратного вызова для var gwdth = $('#contract_grid').jqGrid("getGridParam","tblwidth");

Free jqGrid сохраняет оригинальныйwidth, использованный при создании сетки в widthOrg опции jqGrid, и он использует следующую строку внутри columnChooser

$self.jqGrid("setGridWidth", 
    !p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%") ? p.tblwidth : p.width, 
    p.shrinkToFit); 

вы не указано autowidth: true и вы использовали width: 1200 параметр при создании сетки (который будет widthOrg позже). Поэтому бесплатный jqGrid должен использовать tblwidth в вашем случае по умолчанию вместо width.