javascript - SlickGrid - 奇怪的 : After custom filter and viewport resize, 单元格突然增加间距

Question

这种奇怪的行为让我很困惑，我只想知道是否有人遇到过这个问题。我相当确定这是库的一个错误(顺便说一句，感谢 SlickGrid mleibman!)。

我正在使用一个带有多个过滤器选项的 dataView 网格，其工作方式如下:

绑定(bind):

$("#searchField").keyup(function (e) {
    if (e.which == 27) {
        this.value = "";
    }

    searchString = $.trim(this.value.toLowerCase()).split(' ');
    currFilters.searchString = searchString;

    dataView.setFilterArgs(currFilters);
    dataView.refresh();
    dataView.setFilter(searchFilter);
});

$("#fromDate").keyup(function (k) {
    if (k.which == 27) {
        this.value = "";
    }

    fromDateString = this.value;
    currFilters.fromDateString = '01/01/1969';

    dataView.setFilterArgs(currFilters);
    dataView.refresh();
    dataView.setFilter(searchFilter);
});

...等等等等

过滤器:

function searchFilter(item, args) {
        for (property in args) {
            if (args.hasOwnProperty(property) && property == "searchString") {
                if (args[property] != "" && item["ClientName"].toLowerCase().indexOf(args[property]) == -1) {
                    return false;
                }
            }
            if (args.hasOwnProperty(property) && property == "fromDateString") {
                var _d = new Date(parseInt(item["RecordCreated"].substr(6)));
                var _f = new Date(args[property]);

                if (_f.getTime() > _d.getTime()) {
                    return false;
                }
            }
            // etc, etc, etc...
       }
    return true;
}

我还有一个“高级过滤器”选项，可将过滤器工具栏扩展到我的网格上方，以显示默认可视项中的一些附加选项。

这对网格/视口(viewport)有这样的影响:

$("#btnFilter").toggle(function () {
        $("#filters").stop().animate({
            height: "55px"
        }, 100);
        $("#myGrid .slick-viewport").stop().animate({
            height: "-=23"
        }, 100);
        $("#myGrid").stop().animate({
            height: "-=23"
        }, 100);
    }, function () {
        $("#filters").stop().animate({
            height: "32px"
        }, 100);
        $("#myGrid .slick-viewport").stop().animate({
            height: "+=23"
        }, 100);
        $("#myGrid").stop().animate({
            height: "+=23"
        }, 100);
    });

现在一切正常。该问题对于我的应用程序的上述两个部分的结果组合非常具体。

如果我有一个组合(或单个)过滤器返回不需要垂直滚动条的行数然后我点击我的“高级过滤器”按钮，随后手动调整网格和视口(viewport)的大小，各个单元格有大约 8 像素的“空白”，好像它们都使用左移:8 像素(它大约是垂直滚动条的大小......即使记录不需要它，它也会在点击高级过滤器按钮后出现......这我可能能够调整)。

这是受影响网格的一部分的图像:

我认为一个简单的解决方案是强制视口(viewport)始终显示垂直滚动条，但这实际上行不通。任何想法或建议都会很棒!

更新

---

所以我创建了一个解决方法，问题是需要显示垂直滚动条的视口(viewport)手动调整大小。修复对我来说已经足够好了，但我仍然想深入了解问题和/或将其确认为错误，以便将其提交给 Leibman 以寻求解决方案。

根据要求，这是我的配置选项:

var options = {
        editable: false,
        enableAddRow: false,
        enableCellNavigation: true,
        selectedCellCssClass: "selected",
        syncColumnCellResize: true,
        multiSelect: true,
        asyncEditorLoading: false,
        forceFitColumns: true,
        autoEdit: false,
        multiColumnSort: true
    };

Answer 1

在使用 force fit 列时，你应该尝试使用 minWidth 和 maxWidth 属性，这样你就不会掉下来，它们应该全部组合使用......请看一下我之前的两个答案我给了类似的问题，应该能帮到你，希望对你有帮助。
Slickgrid column width should automatically get resized according to widest row content
Slickgrid: Final column auto size to use all remaining space

希望对您有所帮助，我知道 SlickGrid 中的自动调整列大小有点棘手，尽管我使用列大小的所有属性取得了更大的成功:宽度、最小宽度、最大宽度...第二个链接向您展示了我如何使 Canvas 自动调整大小