我不确定它会解决你所有的问题,但就我而言,我确实使用forceFitColumns
然后根据我希望我的列在大小上如何反应,我将使用以下组合minWidth
and width
,在某些情况下,那些永远不会超过一定宽度的,我会使用maxWidth
以及。现在你遇到的问题是设置时minWidth
与 as 相同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();
});
EDIT
我还对以下事实感到恼火:将所有这些一起使用会阻止您调整列的宽度。很久以后,我想出了一个不同的解决方案,它使字段扩展(采用可用宽度)并且不会阻止您调整宽度大小。所以我相信这个新的解决方案能够为您提供您正在寻找的东西......首先删除maxWidth
财产且仅限使用minWidth
and width
,实际上你可能只能使用width
如果你愿意的话。不幸的是,现在我不得不修改核心文件 1slick.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
包含该属性的复选框,但这完全是可选的...如果你们中的任何人也想要的话,我也可以添加该代码。瞧! :)
EDIT #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
flag.