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 相关文章推荐
javascript打印html内容功能的方法示例
Nov 28 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 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 图像尺寸调整代码
2010/05/26 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript实现json页面分页实例代码
2014/02/20 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
python友情链接检查方法
2015/07/08 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python温度转换实例分析
2018/01/17 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
关于打架的检讨书
2014/01/17 职场文书
发展部经理职责规定
2014/02/22 职场文书
会计自荐信范文
2014/03/09 职场文书
市级文明单位申报材料
2014/05/07 职场文书
员工年终自我评价
2014/09/14 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL
MySQL查询日期时间
2022/05/15 MySQL