SlickGridドキュメントの改善

SlickGridは、テーブルを表示するための小さなjavascriptコンポーネントです。 このコンポーネントの特徴は、情報の表示順序に集中していることであり、その（情報）ソースの操作ではありません。 SlickGridのもう1つの特徴的な機能は、AJAXを介した作業方法の説明など、非常に質の低いドキュメントです。



SlickGridは、テーブル内の500 レコードと500,000レコードの両方で同等に高速に動作する非常に優れたJavaScriptグリッドです。 アイデアは、現在DOMに表示されている要素のみを追加し、現在表示されていない要素を削除することです。 SlickGridはStackExchange Data Explorerにも使用されます。



ただし、プロジェクトでSlickGridを使用すると、ドキュメントがほとんど完全に存在しないため、作成者の意図に応じて、 StackOverflowの 例 、質問/回答、およびGoogleグループによってその役割が実行されるため、困難が生じます。 まあ、とにかく、何もないよりはましです。



ページ全体を再描画せずに、つまりAJAXを使用して、リクエストパラメータに応じてデータをロードしたかったのです。 一連のサンプルには、フィルタリングでAJAXデータの読み込みを使用するオプションがあります 。 素晴らしい、私が必要なもの！ 真の例では、何らかのエラーが発生しますが、まあまあです（digg.comのせいにしてください）。 「ドキュメント」、つまり例の例を見てみましょう。 ええ、slick.remotemodel.jsのSlick.Data.RemoteModelのようなオブジェクトが使用されます。 うーん、ここで何が起こっているの？ この質問は私（ 1、2 ）だけでなく興奮することがわかります。



さて、今のところこの瞬間を先送りします。 AJAXのほかに、ページ分割されたテーブル行のルックアップを使用します。 これには、Slick.Controls.Pagerタイプのオブジェクトが使用されます。 しかし、やめて！ このオブジェクトのコンストラクター引数は、Slick.Data.DataView型のオブジェクトでなければなりません。 DataViewとRemoteModelをリンクする方法は？ それはスズメの銃声のような匂いがします...私たちは今のところこの瞬間を延期します。 また、クエリパラメータのあるトップフィールドを除き、グリッドがページ全体を占めるようにします。 例の中には、適切なオプションがあります 。 ただし、この例にページネーションを追加すると、グリッド自体は表示されなくなります。






その結果、SlickGridリポジトリフォークが作成され、説明した問題の解決策を含む例が追加されました。 すべてが非常にシンプルであることが判明しました。



AJAX読み込みを整理するには、Slick.Data.DataView型とSlick.Grid型のオブジェクトのインスタンスをリンクする必要があります（1つ目は表示用のデータの保存を担当し、2つ目はグリッドをレンダリングします）。

dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データの読み込みは、Slick.Data.DataView型のオブジェクトを介して実行する必要があります。

 function getData() { $.get(url, function(data) { dataView.beginUpdate(); dataView.setItems(data); dataView.endUpdate(); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グリッドおよびその他の要素がページの領域全体を占めるようにするには、SlickGridユーザーインターフェイスの内部の高さを設定し、Slick.Gridオブジェクトの特別なメソッドを実行するだけで十分です。

 var h = $("#container").height()-$("#header").height()-$("#pager").height()-$(".slick-header").height(); $(".slick-viewport").height(h); grid.resizeCanvas();