AngularJS  ng-table插件设置排序


Posted in Javascript onSeptember 21, 2016

基础概念

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插件 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
vue实现百度搜索功能
Dec 28 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
BooStrap对导航条的改造实践小结
Sep 21 #Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 #Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 #Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 #Javascript
D3.js实现饼状图的方法详解
Sep 21 #Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 #Javascript
You might like
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
几行js代码实现自适应
2017/02/24 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python lambda的使用详解
2021/02/26 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
爱我中华教学反思
2014/04/28 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书