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

Question

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

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

我见过：

使一列填充 SlickGrid 中的剩余空间，而不会弄乱显式宽度的列
调整浏览器窗口大小时调整网格大小
如何自动调整 SlickGrid 中的列大小？

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

如果我设置

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

如果您通缉。不幸的是，现在我不得不使用以下代码修改核心文件 1

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。

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

Answer 3

基于 @Raphael Koszalka 的想法，我将其与 Resizer 插件结合起来。

调整大小插件在示例 15中进行了演示。

您可以在 onGridAfterResize 挂钩中调整最终的列宽。

import { SlickResizer } from 'slickgrid';

let resizer = new SlickResizer({
   container: '.grid1enc'
});
grid.registerPlugin(resizer); 
resizer.onGridAfterResize.subscribe(resize_handler);

function resize_handler(e,args) {
   const grid=args.grid;
   const best=calc_final_column_width(grid,400);

   const columns=grid.getColumns();
   columns[columns.length - 1].width=best;
   grid.setColumns(columns); // fixes the column header
};

function sum_of_all_but_last_column_widths(columns) {
   let sum=0;
   for (let c=1; c<=columns.length - 1; c++) {
      sum=sum+columns[c-1].width;
   };
   return sum;
};

function calc_final_column_width(grid,min) {
   const mywidth = grid.getGridPosition().width;
   const sum=sum_of_all_but_last_column_widths(grid.getColumns());
   return mywidth > sum + min ? mywidth-sum : min;
};

在 6pac Slickgrid v5 上测试。