angularjs表格ng-table使用备忘录

2019-11-20 10:25:29

字体：大中小

来源：转载

供稿：网友

项目中用到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中call apply 与 bind方法详解

下一篇：详解AngularJS控制器的使用