slickgrid - 2 つの洗練されたグリッドの質問: 1. 列ヘッダーを強調表示する方法、2. スクロールの終了がいつ発生したかを知る方法

Question

slickgrid を使用して Web サイトを構築していますが、次の 2 つの問題があります。

1. ユーザーが列ヘッダーをクリックするたびに列全体を選択したい。この例に示すように、セルのスタイルを変更できました。列ヘッダーのスタイルを変更する方法を理解できませんでした

2. slickgrid でスクロールの終了がいつ発生したかを知る方法。私は現在やっています

   $(".slick-viewport").scroll(function () {
       if ($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()) {
           handle_end_of_scroll()
       }
   })
   

しかし、私は滑らかなグリッド本体の css クラス名に依存しており、後で slickgrid を新しいバージョンに更新すると問題が発生する可能性があります。slickgrid の実装が変更された場合、コードのこの部分を更新する必要があるかもしれません。

Answer 1

Change the style of a header

You could force an update to a header which would trigger a onHeaderCellRendered event in which you could then change the class on the header. Pretty messy, though.

grid.onHeaderCellRendered.subscribe(function (e, args) {
    var headerCell = args.node;
});
grid.updateColumnHeader('columnID');

Check if scrolled to end

Binding to scroll events directly is always bad. You should subscribe the the onViewportChanged event and getViewport method to check if you have reached the end.

grid.onViewportChanged.subscribe(function () {
    var lastRow = grid.getViewport().bottom;
    if (lastRow >= grid.getDataLength() - 1) {
        console.log('at bottom');
    }
});