Angularjs ngTable使用备忘

项目中用到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"
        }]

官网demo：http://bazalt-cms.com/ng-table/example/10

posted @ 2015-04-29 10:01  沉默术士  阅读(7284)  评论(0)    收藏  举报