Question

我正在使用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为真时才有效。

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

有什么建议吗？

Answer 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中的一个：

//-- 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标记。

Answer 2

我知道这个回复迟到了。

但我设法做到这一点，无需在slick.grid.js更改内容或在列数组中设置min / maxWidth。

而我所做的是迭代遍历列数组，添加每列的“width”字段的值，然后我做了一个简单的数学计数，将最后一列宽度设置为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;
}

Slickgrid：最终列自动调整大小以使用所有剩余空间

2 个答案: