suchen

Heim >Web-Frontend >js-Tutorial >AngularJS-Tabelle ng-table Verwendung memo_node.js

AngularJS-Tabelle ng-table Verwendung memo_node.js

WBOY
WBOYOriginal
2016-05-16 15:11:271345Durchsuche

Im Projekt wird die AngularJS-Tabelle ng-table verwendet, die über sehr leistungsstarke Funktionen wie Suche, Sortierung, Kontrollkästchen, Paging, Anzahl der auf jeder Seite angezeigten Tabellen usw. verfügt. Für API, Demo usw. können Sie sich nur auf die offizielle Website beziehen. Notieren Sie sich hier, ich werde es auf jeden Fall eines Tages verwenden.

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() &#63; $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-Daten: 

[{
      "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"
    }]

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des Gruppenabgleichs und der Rückreferenzierung von regulären JavaScript-Ausdrücken_Javascript-FähigkeitenNächster Artikel：Detaillierte Erläuterung des Gruppenabgleichs und der Rückreferenzierung von regulären JavaScript-Ausdrücken_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen