angularjs表格ng-table使用备忘录


Posted in Javascript onMarch 09, 2016

项目中用到angularjs的表格ng-table,功能相当强大,像搜索、排序、checkbox、分页、每页表格显示数目等都有。API,demo什么的也只能参考官网了。这里做个备忘,哪天肯定还会用到。

HTML:

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
  <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="angular.js"></script>
  <script data-require="ng-table@*" data-semver="0.3.0" src="ngTable.js"></script>
  
  <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.2/ng-table.css" />
  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="bootstrap.min.css" />
  
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="main" ng-controller="DemoCtrl">
  <p><strong>Page:</strong> {{tableParams.page()}}
  <p><strong>Count per page:</strong> {{tableParams.count()}}

<p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>

  <table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }">
      <td width="30" style="text-align: left" header="'ng-table/headers/checkbox.html'">
        <input type="checkbox" ng-model="checkboxes.items[user.organizationId]" />
      </td>
      <td data-title="'编号'" sortable="'organizationId'">
        {{user.organizationId}}
      </td>
      <td data-title="'名称'" sortable="'name'">
        {{user.name}}
      </td>
    </tr>
  </table>
  <script type="text/ng-template" id="ng-table/headers/checkbox.html">
    <input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" />
  </script>

</body>
</html>

js:

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams, NameService) {

  var data = NameService.data;

  $scope.tableParams = new ngTableParams(
   {
    page: 1,      // show first page
    count: 10,      // count per page
    sorting: {name:'asc'}
   },
   {
    total: 0, // length of data
    getData: function($defer, params) {
     NameService.getData($defer,params,$scope.filter);
    }
  });
  
  $scope.$watch("filter.$", function () {
    $scope.tableParams.reload();
  });
  
});

app.service("NameService", function($http, $filter){
 
 function filterData(data, filter){
  return $filter('filter')(data, filter);
 }
 
 function orderData(data, params){
  return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData;
 }
 
 function sliceData(data, params){
  return data.slice((params.page() - 1) * params.count(), params.page() * params.count())
 }
 
 function transformData(data,filter,params){
  return sliceData( orderData( filterData(data,filter), params ), params);
 }
 
 var service = {
  cachedData:[],
  getData:function($defer, params, filter){
   if(service.cachedData.length>0){
    console.log("using cached data")
    var filteredData = filterData(service.cachedData,filter);
    var transformedData = sliceData(orderData(filteredData,params),params);
    params.total(filteredData.length)
    $defer.resolve(transformedData);
   }
   else{
    console.log("fetching data")
    $http.get("data.json").success(function(resp)
    {
     angular.copy(resp,service.cachedData)
     params.total(resp.length)
     var filteredData = $filter('filter')(resp, filter);
     var transformedData = transformData(resp,filter,params)
     
     $defer.resolve(transformedData);
    }); 
   }
   
  }
 };
 return service; 
});

json数据:

[{
      "hidden": 1,
      "launchImage": "2015_4_9_12_bb7e0a446ed74ae7ad0a3554a54183bc_1298477763",
      "name": "张三",
      "orgId": 1498031949070997504,
      "organizationId": "1498031949070997504"
    }, {
      "hidden": 1,
      "launchImage": "http://7s1rmc.com1.z0.glb.clouddn.com/2015_4_9_12_0ab5b02cf1df4ac49a7376b820816307_2127491219|39e202124ac90ec531009b0edbbbe0ba",
      "name": "李四",
      "orgId": 1498046360909250560,
      "organizationId": "1498046360909250560"
    }]

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
vue环境搭建简单教程
Nov 07 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
详解AngularJS控制器的使用
Mar 09 #Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 #Javascript
javascript基本算法汇总
Mar 09 #Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 #Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 #Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 #Javascript
jquery实现文本框textarea自适应高度
Mar 09 #Javascript
You might like
phpwind中的数据库操作类
2007/01/02 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
对Angular中单向数据流的深入理解
2018/03/31 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Python中如何引入第三方模块
2020/05/27 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
python 实现简易的记事本
2020/11/30 Python
利用python爬取有道词典的方法
2020/12/08 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
三年级音乐教学反思
2014/01/28 职场文书
2014年行政工作总结
2014/11/19 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
母亲去世追悼词
2015/06/23 职场文书
尊师重教主题班会
2015/08/14 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers