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,如果你想.现在我不得不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标志的限制.