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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
ES6的异步终极解决方案分享
Jul 11 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.ini中文版
2006/10/09 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
js实现缓动动画
2020/11/25 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python itertools模块详解
2015/05/09 Python
浅析Python数据处理
2018/05/02 Python
对Python中plt的画图函数详解
2018/11/07 Python
如何基于Python实现数字类型转换
2020/02/07 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
纪检干部个人对照检查材料
2014/09/23 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
linux下安装redis图文详细步骤
2021/12/04 Redis