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.ajax 用户登录验证代码
Oct 29 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
js验证账户名是否重复
May 26 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
详解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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php cookis创建实现代码
2009/03/16 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
一个获取第n个元素节点的js函数
2014/09/02 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
基于python3的socket聊天编程
2020/02/17 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
党组织公开承诺书
2014/03/29 职场文书
医院保洁服务方案
2014/06/11 职场文书
考试作弊检讨书
2015/01/27 职场文书
办公室管理规章制度
2015/08/04 职场文书
课题研究阶段性总结
2015/08/13 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书