この奇妙な振る舞いは私を混乱させます.誰かがこの問題に遭遇したかどうか知りたいだけです. 私はそれがライブラリのバグであることをかなり確信しています (ところで、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);
});
今、すべてが正常に動作します。この問題は、私のアプリケーションの前述の 2 つの部分の結果の組み合わせに非常に固有のものです。
垂直スクロールバーを必要としない多数の行を返す組み合わせ (または単一) フィルターがあり、「高度なフィルター」ボタンを押すと、グリッドとビューポートを手動でサイズ変更すると、個々のセルは約 8px になります。 left: 8px を使用してすべてシフトされたかのように "空白" (垂直スクロールバーのサイズについてです...レコードが必要としない場合でも、高度なフィルター ボタンを押した後に表示されます...これは微調整できる可能性があります) .
影響を受けるグリッドの一部の画像を次に示します。
簡単な解決策は、ビューポートに常に垂直スクロールバーを表示させることだと思っていましたが、実際にはうまくいきませんでした。どんな考えやアドバイスも素晴らしいでしょう!
アップデート
そのため、回避策を作成しました。問題は、垂直スクロール バーの表示を必要とするビューポートの手動サイズ変更です。修正は私にとっては十分ですが、問題の真相を突き止めたり、バグとして確認したりして、Leibman に解決策を提出したいと考えています。
リクエストに応じて、ここに私の設定オプションがあります:
var options = {
editable: false,
enableAddRow: false,
enableCellNavigation: true,
selectedCellCssClass: "selected",
syncColumnCellResize: true,
multiSelect: true,
asyncEditorLoading: false,
forceFitColumns: true,
autoEdit: false,
multiColumnSort: true
};