jqgrid列宽自动调整

jqgrid的列宽是否可以根据该列的内容动态更改？我使用了shrinkToFit和autoWidth，但没有一个适合我。我使用jqgrid 4.5.2。我已经搜索并阅读了其他问题，但这些问题对我来说并不适用。也许有一个小部件可以做到这一点。如果你能帮助我，我将不胜感激

colModel:[{name:“f_name”，index:“f_name”，宽度：'100%}]

以下是我如何基于列内容实现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();

$（this.parent（）.append（“”）；
gridName=this.id；
$（'#gbox'+gridName+'.ui jqgrid htable，'#'+gridName）.css（'width'，'inherit'）；
$（'#'+gridName）.parent（）.css（'width'，'inherit'）；
var columnNames=$（“#”+gridName）.jqGrid（'getGridParam'，'colModel'）；
宽度；
//通过Cols循环
for（var itm=0，itmCount=columnNames.length；itmmaxWidth）maxWidth=thisWidth；
}                    
$（“#”+gridName+”.jqgfirstrow td:eq（“+itm+”），“#”+gridName+“#”+columnNames[itm].name）.width（maxWidth.css（'min-width'，maxWidth）；
}
$（“#宽度测试”）.remove（）；

一个有效的例子：

希望这有帮助

---

Paul

这是一个很好的解决方案，但是重新调整大小时，列宽会跳到初始宽度。 这是我作为一个单独函数修改的解决方案。设计用于将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');
}

函数setColumnWidths（gridName）{
if（$（'#'+gridName）.attr（'columnsSet'）=='true'）返回；
$（'body'）。追加（'WIDTHTEST'）；
$（'#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'）；
宽度；
//通过Cols循环
for（var itm=0，itmCount=columnNames.length；itmmaxWidth）maxWidth=thisWidth；
}
如果（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）；
}
$（“#宽度测试”）.remove（）；
$（'#'+gridName）.attr（'columnsSet'，'true'）；
}

我不确定前面是否回答了这个问题，但下面是我实施的解决方案，它正在发挥作用。只需提供列宽百分比，所有列的总和应达到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

pphillips001答案对我来说很有用，但随着网格的增长，调整大小的速度会变慢。我刚刚更新了逻辑，现在性能非常好

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 = 0;

    // 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
        var maxText = 0;
        var theCell;
        for (var itm2 = 0, itm2Count = curObj.length; itm2 < itm2Count; itm2++) {
            thisCell = $(curObj[itm2]);
            if (maxText < thisCell.text().length) {
                maxText = thisCell.text().length;
                theCell = thisCell;
            }
        }
        if (theCell !== undefined) {
            $('#widthTest').html(theCell.html()).css({
                'font-family': theCell.css('font-family'),
                'font-size': theCell.css('font-size'),
                'font-weight': theCell.css('font-weight')
            });

            thisWidth = $('#widthTest').width() + 5;
        }
        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');

函数setColumnWidths（gridName）{
if（$（'#'+gridName）.attr（'columnsSet'）=='true'）返回；
$（'body'）。追加（'WIDTHTEST'）；
$（'#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=0；
//通过Cols循环
for（var itm=0，itmCount=columnNames.length；itm