Jquery jqGrid根据文本长度调整列大小

我试图找出如何根据网格的内容调整网格的列。 这仅适用于特定列。 到目前为止，我所做的是通过循环行和比较内容的长度来调整colModel

如果内容超过以前的已知长度，它将再次调整colModel。 看起来像这样

        // Get rowId's and get find the longest content
        $.each(grid.jqGrid('getDataIDs'), function(row, rowid) {
            // Loop through the specified columns
            $.each(abo_fields, function(colid, column) {
                var abo = grid.jqGrid('getCell', rowid, column);
                var new_width = abo.length * 8;
                var current = grid.jqGrid('getColProp', column);
                if(current['width'] < new_width) {
                    grid.jqGrid('setColProp', column, {width:new_width});
                }                    
            });
        });

//获取rowId并找到最长的内容
$.each（grid.jqGrid（'getdataid'），函数（row，rowid）{
//循环指定的列
$.each（abo_字段、函数（colid、列）{
var abo=grid.jqGrid（'getCell'，rowid，column）；
var new_width=abo.length*8；
var current=grid.jqGrid（'getColProp'，列）；
如果（当前['width']<新宽度）{
jqGrid（'setColProp'，列，{width:new_width}）；
}                    
});
});

当我请求getColProp时，colModel被调整。 当我使用grid.trigger（'reloadGrid'）；该列似乎与原始colModel中指定的保持相同。 我还尝试通过jquery调整CSS，但也没有成功

---

任何帮助都将不胜感激。

因此，我在colModel选项中进行了进一步挖掘，并发现以下内容：

以下是在构建网格时不能动态更改的选项（如果更改，则这些选项无效或将导致网格错误）。对于其中一些选项，有一些方法可用于更改值

jqGrid wiki在您真正需要时也会说以下内容。只要记住，当这一步完成时，网格中构建的任何逻辑都将消失

使用当前设置重新加载网格。这意味着，如果数据类型为xml或json，将向服务器发送一个新请求。此方法应应用于已构建的网格。请注意，此方法不会更改标题信息，这意味着对colModel的任何更改都不会受到影响。您应该使用gridUnload重新加载具有不同colModel的新配置。只有当loadonce:false时才有效

---

Hop这对其他人也有帮助：）

以下是我如何基于文本内容实现可变列宽的方法-将其添加到gridComplete事件中：

$('#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();

$（'#父'）.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（）；

一个有效的例子：

我希望有人觉得这有用

问候,

保罗

$('#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();