jqgrid列宽自动

Question

有没有办法让jqgrid的列宽根据该列的内容动态变化？我使用了 shrinkToFit 和 autoWidth，但没有一个对我有用。我使用 jqgrid 4.5.2。我搜索并阅读了其他问题，但这些问题对我不起作用。也许有一个小部件可以做到这一点。如果你能帮助我，我将不胜感激。

Answer 1

下面是我如何根据列内容实现 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/

希望对您有所帮助，

保罗