Slickgrid:最终列自动调整大小以使用所有剩余空间 [英] Slickgrid: Final column autosize to use all remaining space

问题描述

我正在使用SlickGrid并努力寻找以下解决方案:

I'm using SlickGrid and struggling to find an elegant solution to the following:

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

我看过:

排成一列填充SlickGrid中的剩余空间而不会弄乱显式宽度的列
调整浏览器窗口大小时调整网格大小
如何在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时仍然有效.

But these don't seem to quite do what I need. If I use the forceFitColumns option, then all columns will autosize (unless I put a maxsize on them). Using resizeCanvas on window.resize works well - but it still only works if forceFitColumns is true.

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

If I set minWidth=maxWidth - then I can't resize the column.

有什么建议吗?

Any suggestions?

推荐答案

我不确定它是否可以解决您的所有问题，但就我而言，我确实使用了forceFitColumns，然后取决于我希望我的专栏对此做出何反应size我将使用minWidth和width的组合，并且在某些情况下，它们将永远不会超过特定宽度，因此我也将使用maxWidth.现在您遇到的问题是，将minWidth设置为与maxWidth相同时，这无疑将使其无法调整大小，请考虑一下您设置的最小值和最大值，SlickGrid现在能够尊重它之后再调整大小.我也有一个网格，它占据了我屏幕的95％的宽度，所以我在侧面有一些填充，并使用jQuery使用自动调整大小.

I'm not sure it would correct all your problem but in my case I do use the forceFitColumns and then depending how I want my column to react in size I will use a combination of minWidth and width, and in some cases the ones that will never exceed a certain width, I would then use a maxWidth as well. Now the problem you have is when setting the minWidth to be the same with as maxWidth this of course will make it unresizable, well think about it you set a minimum and a maximum, SlickGrid is respecting it by now being able to size it afterwards. I also have my grid which takes 95% width of my screen so I have a little padding on the side and with it I use a auto-resize using 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的其中之一:

EDIT
I also was annoyed by the fact that using all of these together is blocking you from resizing the width of the column. I came up with a different solution, much later after, which makes the fields to expand (take available width) and does not block you afterwards on resizing the width. So this new solution I believe is giving you exactly what you are looking for... First of all remove the maxWidth property and only use minWidth and width, actually you could probably use only the width if you wanted. Now I had to unfortunately, modify 1 of the core file slick.grid.js with the following code:

//-- 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();
}

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

then going back to my grid definition, I replace my previous options with this:

// 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以包括该属性的复选框，但这是完全可选的...如果您也需要的话，我也可以添加该代码.瞧！ :)

with this new change it has some functionality of the force fit (expanding) but does not restrict you on resizing your columns width afterwards like the force fit does. I also tested it with the columnPicker, if you hide a column it's resizing the others accordingly. I also modified the file slick.columnpicker.js to include a checkbox for that property but that is totally optional...I can add the code for that too if any of you want it as well. Voila!!! :)

编辑#2
后来，我意识到无需修改核心文件，我们可以在创建网格后简单地调用grid.autosizeColumns().像这样

EDIT #2
I realized much later that there's no need to modify the core file, we can simply call grid.autosizeColumns() after the grid creation. Like this

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

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

这将自动调整列的大小以适合首次加载时的屏幕，但不会限制forceFitcolumns标志.

This will automatically resize the columns to fit the screen on first load but will not give you the restriction of the forceFitcolumns flag.

这篇关于Slickgrid:最终列自动调整大小以使用所有剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！