快捷導(dǎo)航

AngularJS ng-table插件設(shè)置排序

更新時(shí)間：2016年09月21日 10:28:55 作者：MakingChoice

這篇文章主要介紹了AngularJS ng-table插件設(shè)置排序的相關(guān)資料,需要的朋友可以參考下

基礎(chǔ)概念

ng-table提供了一個(gè)表頭來(lái)提供，基礎(chǔ)的過(guò)濾信息：

（1）指定一列的過(guò)濾器，然后模板就會(huì)使用。
（2）ngTable支持number, text, select 和 select-multiple的值模板。
（3）可以有選擇的為NgTableParams提供初始過(guò)濾值。

 <div class="row">
 <div class="col-md-6" ng-controller="demoController as demo">
  <h3>ngTable directive</h3>
  <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
  <tr ng-repeat="row in $data">
   <td data-title="'Name'" filter="{name: 'text'}">{{row.name}}</td>
   <td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
   <td data-title="'Money'">{{row.money}}</td>
   <td data-title="'Country'" filter="{ country: 'select'}" filter-data="demo.countries">{{row.country}}</td>
  </tr>
  </table>
 </div>
 <div class="col-md-6" ng-controller="dynamicDemoController as demo">
  <h3>ngTableDynamic directive</h3>
  <table ng-table-dynamic="demo.tableParams with demo.cols" class="table table-condensed table-bordered table-striped">
  <tr ng-repeat="row in $data">
   <td ng-repeat="col in $columns">{{row[col.field]}}</td>
  </tr>
  </table>
 </div>
 </div>

(function() {
 "use strict";
 var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
 app.controller("demoController", demoController);
 demoController.$inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];
 //注入NgTableParams（ngtablemodule）和ngTableSimpleMediumList、ngTableDemoCountries兩個(gè)數(shù)據(jù)源
 function demoController(NgTableParams, simpleList, countries) {
 this.countries = countries;//初始化selcet的數(shù)據(jù)源
 this.tableParams = new NgTableParams({
  // initial filter
  filter: { name: "T" } //初始過(guò)濾條件
 }, {
  dataset: simpleList
 });
 }


 app.controller("dynamicDemoController", dynamicDemoController);

 dynamicDemoController.$inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];

 function dynamicDemoController(NgTableParams, simpleList, countries) {
 this.cols = [//自定義table條目，過(guò)濾條件、表頭名字和數(shù)據(jù)源,filterData: countries。
  { field: "name", title: "Name", filter: { name: "text" }, show: true },
  { field: "age", title: "Age", filter: { age: "number" }, show: true },
  { field: "money", title: "Money", show: true },
  { field: "country", title: "Country", filter: { country: "select" }, filterData: countries, show: true }
 ];

 this.tableParams = new NgTableParams({
  // initial filter
  filter: { country: "Ecuador" } //初始化數(shù)據(jù)源
 }, {
  dataset: simpleList
 });
 }
})();


(function() {
 "use strict";

 angular.module("myApp").run(setRunPhaseDefaults);
 setRunPhaseDefaults.$inject = ["ngTableDefaults"];
//通過(guò)config來(lái)設(shè)置表格數(shù)量
 function setRunPhaseDefaults(ngTableDefaults) {
 ngTableDefaults.params.count = 5;
 ngTableDefaults.settings.counts = [];
 }
})();