Slickgrid：最后一列自动调整大小以使用所有剩余空间答案

【问题标题】：Slickgrid: Final column autosize to use all remaining spaceSlickgrid：最后一列自动调整大小以使用所有剩余空间
【发布时间】：2013-06-25 23:18:00
【问题描述】：

我正在使用 SlickGrid 并努力为以下问题找到一个优雅的解决方案：

所有列在首次呈现时必须具有特定的初始宽度，但之后可以调整大小
调整窗口大小时，最后一列应自动填充剩余的列空间

我见过：

Make one column fill remaining space in SlickGrid without messing up explicit width columns
resizing of grid when resizing browser window
How do I autosize the column in SlickGrid?

但这些似乎并不能完全满足我的需要。如果我使用 forceFitColumns 选项，那么所有列都会自动调整大小（除非我在它们上设置了 maxsize）。在 window.resize 上使用 resizeCanvas 效果很好 - 但它仍然只有在 forceFitColumns 为 true 时才有效。

如果我设置minWidth=maxWidth - 那么我无法调整列的大小。

有什么建议吗？

【问题讨论】：

标签： slickgrid autosize tablecolumn

【解决方案1】：

我不确定它是否能解决您的所有问题，但在我的情况下，我确实使用 forceFitColumns，然后根据我希望我的列在大小上的反应，我将使用 minWidth 和 width 的组合，在某些情况下，那些永远不会超过一定宽度的，我也会使用maxWidth。现在您遇到的问题是，当将minWidth 设置为与maxWidth 相同时，这当然会使其无法调整大小，请考虑一下您设置了最小值和最大值，SlickGrid 现在能够尊重它之后调整大小。我也有我的网格，它占据了我屏幕 95% 的宽度，所以我在侧面有一点填充，并且我使用 jQuery 自动调整大小。

这是我的代码：

// HTML Grid Container
<div id="myGridContainer" style="width:95%;">
    <div class="grid-header" style="width:100%">
        <label>ECO: Log / Slickgrid</label>
        <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" onclick="toggleFilterRow1()"></span>
    </div>
    <div id="myGrid" style="width:100%;height:600px;"></div>
    <div id="myPager"></div>
</div>

// My SlickGrid Options
var options = {
    enableCellNavigation: true,
    forceFitColumns: true
};

// The browser auto-resize 
$(window).resize(function () {
    $("#myGrid").width($("myGridContainer").width());
    $(".slick-viewport").width($("#myGrid").width());
    grid.resizeCanvas();
});

编辑
我还对将所有这些一起使用会阻止您调整列宽的事实感到恼火。很久以后，我想出了一个不同的解决方案，它使字段扩展（采用可用宽度）并且在调整宽度后不会阻止您。所以我相信这个新的解决方案会给你你正在寻找的东西......首先删除maxWidth属性并只使用minWidth和width，实际上你可能只使用width如果你通缉。现在我不得不用以下代码修改核心文件slick.grid.js的1个：

//-- slick.grid.js --//

// on line 69 insert this code
autoExpandColumns: false,

// on line 1614 PREVIOUS CODE
if (options.forceFitColumns) {
    autosizeColumns();
}

// on line 1614 change to this NEW CODE
if (options.forceFitColumns || options.autoExpandColumns) {
    autosizeColumns();
}

然后回到我的网格定义，我将之前的选项替换为：

// My NEW SlickGrid Options
var options = {
    enableCellNavigation: true,
    forceFitColumns: false,     // make sure the force fit is false
    autoExpandColumns: true     // <-- our new property is now usable
};

有了这个新的变化，它具有一些强制拟合（扩展）的功能，但不会像强制拟合那样限制您之后调整列宽。我还用 columnPicker 对其进行了测试，如果你隐藏一个列，它会相应地调整其他列的大小。我还修改了文件slick.columnpicker.js 以包含该属性的复选框，但这完全是可选的......如果你们中的任何人也想要它，我也可以添加它的代码。瞧！！！ :)

编辑 #2
很久以后我才意识到不需要修改核心文件，我们可以在网格创建后直接调用grid.autosizeColumns()。像这样

var options = { forceFitColumns: false };
grid = new Slick.Grid("#myGrid", data, columns, options);

// will take available space only on first load
grid.autosizeColumns();

这将在第一次加载时自动调整列的大小以适应屏幕，但不会给您forceFitcolumns 标志的限制。

【讨论】：

谢谢 - 我遇到的问题是使用 forceFitColumns，如果可以的话，列的宽度会增加。我需要它们保持设定的宽度，但最后一个空列会增长以填充剩余空间。
我能找到的唯一方法是最初将最小/最大宽度设置为相同，然后在渲染网格后将它们设置为 null。另外 - 在窗口调整大小事件中，在 resizeCanvas 之前再次将最小值/最大值设置为宽度，然后再将它们设为空。
我想出了一种不同的方法，它的工作方式与我一直想要的完全一样...不再有烦人的宽度限制。

【解决方案2】：

我知道这个回复有点晚了。

但我已经设法做到了，而无需在 slick.grid.js 上进行更改或在列数组中设置 min/maxWidth。

相反，我所做的是遍历列数组，添加每列的“宽度”字段的值，然后我做了一个简单的数学计算，将最后一列的宽度设置为 innerWidth - totalColumsWidth + lastColumnWidth。

代码：

function lastColumnWidth(columns)
{
        var widthSum = 0;
        angular.forEach(columns, function(col) {
            if(col.width) { widthSum = col.width + widthSum; }
        });
        if(window.innerWidth > widthSum) {
            columns[columns.length-1].width = columns[columns.length-1].width + (window.innerWidth - widthSum);
        }
        return columns;
}

【讨论】：