网络编程 
首页 > 网络编程 > 浏览文章

AngularJS  ng-table插件设置排序

(编辑:jimmy 日期: 2024/11/19 浏览:3 次 )

基础概念

ng-table提供了一个表头来提供,基础的过滤信息:

(1)指定一列的过滤器,然后模板就会使用。
(2)ngTable支持number, text, select 和 select-multiple的值模板。
(3)可以有选择的为NgTableParams提供初始过滤值。

 <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两个数据源
 function demoController(NgTableParams, simpleList, countries) {
 this.countries = countries;//初始化selcet的数据源
 this.tableParams = new NgTableParams({
  // initial filter
  filter: { name: "T" } //初始过滤条件
 }, {
  dataset: simpleList
 });
 }


 app.controller("dynamicDemoController", dynamicDemoController);

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

 function dynamicDemoController(NgTableParams, simpleList, countries) {
 this.cols = [//自定义table条目,过滤条件、表头名字和数据源,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" } //初始化数据源
 }, {
  dataset: simpleList
 });
 }
})();


(function() {
 "use strict";

 angular.module("myApp").run(setRunPhaseDefaults);
 setRunPhaseDefaults.$inject = ["ngTableDefaults"];
//通过config来设置表格数量
 function setRunPhaseDefaults(ngTableDefaults) {
 ngTableDefaults.params.count = 5;
 ngTableDefaults.settings.counts = [];
 }
})();

AngularJS  ng-table插件设置排序

以上就是对AngularJS ng-table插件 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

上一篇:vue.js+boostrap项目实践(案例详解)
下一篇:BooStrap对导航条的改造实践小结
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap