jqgrid列寬自動

有沒有一種方法，jqgrid的列寬根據該列的內容動態變化？我使用了shrinkToFit和autoWidth，但其中沒有一個適合我。我使用jqgrid 4.5.2。我已經搜索並閱讀了其他問題，但這些問題並不適合我。也許有一個小工具可以做到這一點。如果你幫我，我會很感激。jqgrid列寬自動

來源

2014-02-19 Mark

一些進展後，我發現，如果我改變表格的佈局：固定表格的佈局：自動，列的寬度將適合與單元格的內容。但是當我這樣做時，標題不再與列對齊。如果可以的話請幫忙。 – Mark

供將來參考：http://stackoverflow.com/questions/2299441/jqgrid-column-auto-width – andale

-1

colModel：[{名：「f_name」，索引：「f_name」 寬度： '100％'}]

來源

2014-02-20 06:20:05 DarkRay

感謝您的評論。它不適合我。 – Mark

這是行不通的 – jayesh

下面是如何實現基於列的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/

希望這有助於

保羅

來源

2014-09-10 09:36:51 pphillips001

這是一個很好的解決方案，但列寬跳轉到初始寬度時重-漿紗。這是我作爲一個單獨的功能修改後的解決方案。旨在與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'); 
}

來源

2014-12-11 11:29:51

我不知道該提前或沒有回答，但下面是我的解決方案來實現其工作之一。只需提供列寬百分比，所有列的總和應達到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' } 
    ]

感謝如是

來源

2015-11-02 21:57:43

jqgrid列寬自動

回答

相關問題