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

【问题标题】：jqGrid adjust column size depending on text lengthjqGrid根据文本长度调整列大小
【发布时间】：2012-12-24 14:41:11
【问题描述】：

我试图弄清楚如何根据其内容调整网格的列。这仅适用于特定列。到目前为止，我所做的是通过循环遍历行并比较内容的长度来调整 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});
                }                    
            });
        });

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

任何帮助将不胜感激。

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

所以我在 colModel 选项中进行了更多挖掘，发现了以下内容：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

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

name
width
resizable
label (method avail.)

如果你真的需要它，jqGrid wiki 也会说以下内容。请记住，完成此操作后，网格中构建的所有逻辑都将消失。

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

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

希望这对其他人也有帮助:)

【讨论】：

【解决方案2】：

以下是我根据文本内容实现可变列宽的方法 - 将其添加到 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();

一个工作示例：

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

我希望有人觉得这很有用。

问候，

保罗

【讨论】：