Dojo Framework Enhanced Gridの簡単な概要、または表の形式でデータの出力を迅速かつ簡単に編成する方法

多くの場合、多くの初心者のWeb開発者は、何度も何度も車輪を再発明しなければならないことに苦しんでいます。 データの出力とフォーマットは、より複雑でわかりにくくなります。 しかし！ このタスクはDojoによって簡単に処理されます！

まえがき

約1年前、ある会社でWebアプリケーションの開発を開始しました。 これまで、アプリケーションは大量のテーブルを使用してデータを出力していました。 各テーブルは、データベースからデータを取得し、HTMLを生成するエージェントです。 時間の経過とともに、テーブルの数は増え続け、エージェントの数も増えました。これにより、サーバーの負荷が高くなると問題が発生し始めました。



この問題を解決するために、Dojoを使用することが決定されました。 必要なのはJSON形式のデータだけで、Enhanced Gridコンポーネントがすべての日常的な作業を行います！



危機にwhatしているものをよりよく理解するには、このビデオを3分35秒から視聴してください。

最小理論

Dojoのグリッドは、データの選択に基づいてHTMLテーブルを形成するウィジェットです。 このデータは、専用のストレージ（ストア）に保存されます。



EnhancedGrid'aの機能：

• データのフォーマット
• データのフィルタリング-dojox.grid.enhanced.plugins.Filter
• さまざまな形式でデータをエクスポート-dojox.grid.enhanced.plugins.exporter *
• ネストされたソート-dojox.grid.enhanced.plugins.NestedSorting
• コンテキストメニュー-dojox.grid.enhanced.plugins.Menu
• ドラッグアンドドロップ-dojox.grid.enhanced.plugins.DnD
• ページ出力-dojox.grid.enhanced.plugins.Pagination
• データ検索-dojox.grid.enhanced.plugins.Search

解決策

データウェアハウスを作成する

dojo.require("dojo.data.ItemFileWriteStore"); //   var data = { identifier: 'id', //        items: [] //     JSON }; //   var store = new dojo.data.ItemFileWriteStore({data: data});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テーブルレイアウトを作成する

 var layout = [[ {'name': 'Column 1', 'field': 'id'}, {'name': 'Column 2', 'field': 'col2'}, {'name': 'Column 3', 'field': 'col3', 'width': '230px'}, {'name': 'Column 4', 'field': 'col4', 'width': '230px'} ]];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グリッドを作成する

 dojo.require("dojox.grid.EnhancedGrid"); var grid = new dojox.grid.EnhancedGrid({ id: 'grid', store: store, structure: layout, rowSelector: '20px', selectionMode: 'multiple' }, document.createElement('div')); dojo.byId("gridDiv").appendChild(grid.domNode); // grid grid.startup(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グリッドの準備ができました！

まとめ

拡張グリッドを使用すると、テーブルのレイアウトのみを指定してデータをロードし、あらゆる構造のテーブルを操作できます。



例とソースはここにあります。