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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
微信小程序入门之指南针
Oct 22 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
php中去除所有js,html,css代码
2010/10/12 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
基于python if 判断选择结构的实例详解
2019/05/06 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
软件配置管理有什么好处
2015/04/15 面试题
幼儿园中班教师寄语
2014/04/03 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
员工年终考核评语
2014/12/31 职场文书
体育个人工作总结
2015/02/09 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS