这种奇怪的行为让我感到困惑,我只想知道是否有人遇到过这个问题。我相当肯定这是库的一个错误(顺便说一句,感谢 SlickGrid mleibman!)。
我正在使用带有几个过滤器选项的 dataView 网格,它们的工作方式如下:
捆绑:
$("#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;
}
我还有一个“高级过滤器”选项,它扩展了我的网格上方的过滤器工具栏,以显示默认可视项中的一些附加选项。
这对网格/视口有这种影响:
$("#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);
});
现在一切正常。这个问题非常具体到我的应用程序的上述两个部分的组合。
如果我有一个组合(或单个)过滤器返回许多不需要垂直滚动条的行,然后我点击我的“高级过滤器”按钮,随后手动调整网格和视口的大小,单个单元格大约有 8px“空白”,好像它们都使用左移:8px(它大约是垂直滚动条的大小......即使记录不需要它,它也会在点击高级过滤器按钮后出现......这我可以调整) .
这是受影响网格的一部分的图像:
我认为一个简单的解决方案是强制视口始终显示垂直滚动条,但实际上并没有奏效。任何想法或建议都会很棒!
更新
所以我创建了一个解决方法,问题是需要显示垂直滚动条的视口手动调整大小。修复对我来说已经足够好了,但我仍然想深入了解问题和/或将其确认为错误,以便将其提交给 Leibman 以解决问题。
根据要求,这是我的配置选项:
var options = {
editable: false,
enableAddRow: false,
enableCellNavigation: true,
selectedCellCssClass: "selected",
syncColumnCellResize: true,
multiSelect: true,
asyncEditorLoading: false,
forceFitColumns: true,
autoEdit: false,
multiColumnSort: true
};