Heim >Web-Frontend >js-Tutorial >Direktive in AngularJS zum Anpassen einer Tabelle_AngularJS
Lassen Sie mich zunächst die Anforderungen für das Formular erläutern:
● Tabellenstruktur
<table> <thead> <tr> <th>Name</th> <th>Street</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>></td> <td>></td> <td>></td> </tr> </tbody> </table> <div>4行</div>
● Klicken Sie auf eine , um die Spalte zu sortieren
● Sie können dem Header einen Alias
geben
● Sie können einstellen, ob eine bestimmte Spalte angezeigt wird
● Unterhalb der Tabelle befindet sich eine Zeile mit der Gesamtzahl der Zeilen
Wir möchten, dass die Tabelle so aussieht:
<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>
Oben stammt die Datenquelle der Datenquelle von $scope.customers im Controller und hat ungefähr das Format {Name: 'David', Straße: '1234 Anywhere St.', Alter: 25, URL: 'Index.' .html'} werden die Details weggelassen.
columnmap ist für das Aliasing von Spalten und die Entscheidung verantwortlich, ob eine Spalte angezeigt werden soll.
Wie erreicht man das?
Die Richtlinie sieht ungefähr so aus:
var tableHelper = function(){ var template = '', link = function(scope, element, attrs){ } return { restrict: 'E', scope: { columnmap: '=', datasource: '=' }, link:link, template:template }; } angular.module('directiveModule') .directive('tableHelper', tableHelper);
Konkret
Überwachen Sie zunächst die Änderungen in der Datenquelle. Sobald Änderungen vorliegen, laden Sie die Tabelle neu.
scope.$watchCollection('datasource', render); //初始化表格 function render(){ if(scope.datasource && scope.datasource.length){ table += tableStart; table += renderHeader(); table += renderRows() + tableEnd; //加载统计行 renderTable(); } }
Das Laden der Tabelle ist grob in drei Schritte unterteilt: Laden des Tabellenkopfes, Laden des Tabellenkörpers und Laden der Statistikzeilen.
//加载头部 function renderHeader(){ var tr = '<tr>'; for(var prop in scope.datasource[0]){ //{name: 'David',street: '1234 Anywhere St.',age: 25,url: 'index.html'} //根据原始列名获取别名,并考虑了是否显示列的情况 var val = getColumnName(prop); if(val){ //visibleProps存储的是原始列名 visibleProps.push(prop); tr += '<th>' + val + '</th>'; } } tr += '</tr>'; tr = '<thead>' + tr '</thead>'; return tr; } //加载行 function renderRows(){ var rows = ''; for(var i = 0, len = scope.datasource.length; i < len; i++){ rows += '<tr>'; var row = scope.datasource[i]; for(var prop in row){ //当前遍历的原始列名是否在visibleProps集合中,该集合存储的是原始列名 if(visibleProps.indexOf(prop) > -1){ rows += '<td>' + row[prop] + '</td>'; } } rows += '</tr>'; } rows = '<tbody>' + rows + '</tbody>'; return rows; } //加载统计行 function renderTable(){ table += '<br /><div class="rowCount">' + scope.datasource.length + '行</div>'; element.html(table); table = ''; }
Beim Laden des Tabellenkopfes wird eine Methode verwendet, um den Alias basierend auf dem ursprünglichen Spaltennamen abzurufen.
//根据原始列名获取列的别名,并考虑是否隐藏列的情况 function getColumnName(prop){ if(!scope.columnmap) return prop; //得到[{name: 'Name'}] var val = filterColumnMap(prop); if(val && val.length && !val[0].hidden) return val[0][prop]; else return null; }
In der getColumnName-Methode wird eine Spalte basierend auf dem ursprünglichen Spaltennamen verwendet
//比如根据name属性,这里得到[{name: 'Name'}] //[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}] function filterColumnMap(prop) { var val = scope.columnmap.filter(function(map) { if (map[prop]) { return true; } return false; }); return val; }
Der spezifische Code lautet wie folgt:
(function(){ var tableHelper = fucntion(){ var template = '', link = function(scope, element, attrs){ var headerCols = [], //表头列们 tableStart = '
Das Obige ist das vom Herausgeber geteilte Wissen über das Anpassen einer Tabelle mithilfe der Direktive in AngularJS. Ich hoffe, es wird Ihnen hilfreich sein.