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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
javascript中Object使用详解
Jan 26 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
浅谈javascript的闭包
Jan 23 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
浅谈React Event实现原理
Sep 20 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
Vue实现省市区三级联动
Dec 27 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
浅析js封装和作用域
2013/07/09 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Vue实现push数组并删除的例子
2019/11/01 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
营业员演讲稿
2013/12/30 职场文书
物理研修随笔感言
2014/02/14 职场文书
工作试用期自我评价
2015/03/10 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
vue ref如何获取子组件属性值
2022/03/31 Vue.js
字节飞书面试promise.all实现示例
2022/06/16 Javascript