jqgrid 열 너비 자동

Question

jqgrid의 열 너비가 해당 열의 내용에 따라 동적으로 변경되는 방법이 있습니까? 나는 shrinkToFit과 autoWidth를 사용했으나 그들 중 일부는 나를 위해 일하지 않았다. jqgrid 4.5.2를 사용합니다. 나는 다른 질문을 수색하고 읽었지만 그것들은 나를 위해 일하지 않았다. 어쩌면 그렇게 할 수있는 위젯이있을 것입니다. 당신이 나를 도와 주시면 고맙겠습니다.

Answer 1

colModel : [{이름 : "f_name"인덱스 "f_name", 폭 : '100 %'}]

Answer 2

여기

내가 열 내용에 따라있는 jqGrid 열 폭을 구현하는 방법입니다. 이것을 gridComplete 이벤트에 추가하십시오.

$(this).parent().append('<span id="widthTest" />'); 

gridName = this.id; 

$('#gbox_' + gridName + ' .ui-jqgrid-htable,#' + gridName).css('width', 'inherit'); 
$('#' + gridName).parent().css('width', 'inherit'); 

var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel'); 
var thisWidth; 

// Loop through Cols 
for (var itm = 0, itmCount = columnNames.length; itm < itmCount; itm++) { 

    var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']'); 

    var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div'); 
    $('#widthTest').html(thisCell.text()).css({ 
      'font-family': thisCell.css('font-family'), 
      'font-size': thisCell.css('font-size'), 
      'font-weight': thisCell.css('font-weight') 
    }); 
    var maxWidth = Width = $('#widthTest').width() + 24;      
    //var maxWidth = 0;      

    // Loop through Rows 
    for (var itm2 = 0, itm2Count = curObj.length; itm2 < itm2Count; itm2++) { 
      var thisCell = $(curObj[itm2]); 

      $('#widthTest').html(thisCell.html()).css({ 
       'font-family': thisCell.css('font-family'), 
       'font-size': thisCell.css('font-size'), 
       'font-weight': thisCell.css('font-weight') 
      }); 

      thisWidth = $('#widthTest').width(); 
      if (thisWidth > maxWidth) maxWidth = thisWidth;       
    }      

    $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth); 

} 

$('#widthTest').remove(); 

동작하는 예제 :이 도움이

http://jsfiddle.net/Ba5yK/17/

희망,

폴

Answer 3

이것은 좋은 해결책이지만, 열 너비 때 다시 초기 폭으로 이동 - 크기. 이것은 수정 된 솔루션으로서 별도의 기능입니다. 한 번만 shrinkToFit의 False로 설정, 화재와 함께 작동하도록 설계 :

function setColumnWidths(gridName) { 
    if ($('#' + gridName).attr('columnsSet')=='true') return; 

    $('body').append('<span id="widthTest">WIDTHTEST</span>'); 
    $('#gbox_' + gridName + ' .ui-jqgrid-htable,#' + gridName).css('width', 'inherit'); 
    $('#' + gridName).parent().css('width', 'inherit'); 

    var containerWidth=$('#' + gridName).width() - 20; 
    var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel'); 
    var thisWidth; 

    // Loop through Cols 
    for (var itm = 0, itmCount = columnNames.length; itm < itmCount; itm++) { 

     var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']'); 

     var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div'); 
     $('#widthTest').html(thisCell.text()).css({ 
      'font-family': thisCell.css('font-family'), 
      'font-size': thisCell.css('font-size'), 
      'font-weight': thisCell.css('font-weight') 
     }); 
     var maxWidth = $('#widthTest').width() + 40; 
     //var maxWidth = 0;      

     // Loop through Rows 
     for (var itm2 = 0, itm2Count = curObj.length; itm2 < itm2Count; itm2++) { 
      var thisCell = $(curObj[itm2]); 

      $('#widthTest').html(thisCell.html()).css({ 
       'font-family': thisCell.css('font-family'), 
       'font-size': thisCell.css('font-size'), 
       'font-weight': thisCell.css('font-weight') 
      }); 

      thisWidth = $('#widthTest').width(); 
      if (thisWidth > maxWidth) maxWidth = thisWidth; 
     } 
     if (maxWidth > containerWidth) maxWidth=containerWidth; 
     $("#" + gridName).jqGrid('setColProp','amount',{width: maxWidth}); 
     var gw = $("#" + gridName).jqGrid('getGridParam','width'); 
     $("#" + gridName).jqGrid('setGridWidth',gw,true); 
     $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth); 

    } 
    $('#widthTest').remove(); 
    $('#' + gridName).attr('columnsSet','true'); 
} 

Answer 4

나는이 이전 여부를 대답하지만 아래 내가 하나를 작업하는 구현 해결책이 있는지 모르겠습니다. 백분율로 열 너비를 제공하고 모든 열의 합계가 100 %에 도달해야합니다. 하지만 런타임에 열을 추가/제거하는 방법을 잘 모르겠습니다.

나는 그것에 대해서도 연구 중이며 모두 업데이트 할 예정입니다. 테이블 레이아웃에 고정 : 자동차, 열 너비가 셀의 내용에 맞는

columns: [ 
    { text: 'CheckBox', datafield: 'ProjectSubstantialPOUADetailsID', width: '10%' }, 
    { text: 'Area/Phase Substantial', datafield: 'SubstantialPOUA', width: '30%' }, 

    { text: 'Type', datafield: 'SubstantialTypeName', width: '15%' }, 
    { text: 'Achieved', datafield: 'DateAchieved', width: '15%', cellsformat: 'd', formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y" } }, 
    { text: 'PL Final', datafield: 'DateFinal', width: '15%', cellsformat: 'd' }, 
    { text: 'Warranty?', datafield: 'Warranty', width: '15%', columntype: 'checkbox' } 
    ] 

감사 Rushi