AngularJSテーブルディレクティブ

AngularJSは、非常に有望でペースの速いjavascriptフレームワークです。 多くのフレームワークを試してみましたが、文字通りレイアウトを再活性化することができるため、これに決めました。 私はディレクティブを頻繁に使用するためにいくつかの要素を準備することを可能にするディレクティブの実装が本当に好きです。 インターネットには多くの例と既成のソリューションがありますが、1つのソリューションが見つかりませんでした。これがこの記事と小さなライブラリを書く理由でした。



多くの場合、データ、つまりテーブル内のデータの表示に遭遇します。 このような各インターフェイスには、Ajaxを使用したデータの読み込み、大量のデータのページへの分割、データのフィルター処理、並べ替えなど、いくつかの機能が必要です。

私はこれらの問題を迅速に解決し、最小限のコードを記述したかったのです。

起こったことは次のとおりです。

GitHubリポジトリ

<table ng-table="tableParams" show-filter="true" class="table"> <tr ng-repeat="user in users"> <td title="Name" filter="{ 'name': 'text' }" sortable="name"> {[user.name]} </td> <td title="Age" filter="{ 'action': 'button' }" sortable="age"> {[user.age]} </td> </tr> </table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Javascript：

 var Api = $resource('/data'); $scope.tableParams = new ngTableParams({ page: 1, // show first page total: 0, // length of data count: 10, // count per page sorting: { name: 'asc' // initial sorting } }); $scope.$watch('tableParams', function(params) { $scope.loading = true; // ajax request to api Api.get(params.url(), function(data) { $scope.loading = false; // set new data $scope.users = data.result; // update table params $scope.tableParams.total = data.total; }); }, true);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモ



htmlコードからわかるように、プログラマー自身がテーブルの行とその中の各セルを表示するテンプレートの行の塗りつぶしを制御します。これは、このソリューションを、私が検討した他のソリューション（例えばng-grid）



テーブルの見出しとページネーションは自動的に生成され、テーブルに追加されます。 ディレクティブとデータ読み込みコード間の関係全体がtableParams



パラメーターに割り当てられます。この追跡により、データを更新するタイミング（サーバーからの読み込みまたは配列の再ソート）を知ることができます。



その結果、私たちは人生を少し良くする小さな指令を持っています。 AngularJS自体に1つの小さなバグがあるため、インターネット上ではこの種のソリューションはほとんどないと思います。 実際、それが存在していなかった場合、非常にクールで便利なng-transclude



を使用するだけですべてが解決されます。 しかし、それが修正されるまで、私のソリューションがあなたにとって役立つことを願っています。