Let me first tell you the requirements for the form:
● Table structure
<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>
● Click on a th to sort the column
● You can give the header an alias
● You can set whether a certain column displays
● There is a row below the table showing the total number of rows
We want the table to look like this:
<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>
Above, the data source of datasource comes from $scope.customers in controller, which is roughly in the format of {name: 'David', street: '1234 Anywhere St.', age: 25, url: 'index.html'} , the details are omitted.
columnmap is responsible for aliasing columns and deciding whether to display a column.
How to achieve it?
Directive is roughly like this:
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);
Specifically,
First, monitor the changes in the datasource. Once there are changes, reload the table.
scope.$watchCollection('datasource', render); //初始化表格 function render(){ if(scope.datasource && scope.datasource.length){ table += tableStart; table += renderHeader(); table += renderRows() + tableEnd; //加载统计行 renderTable(); } }
Loading the table is roughly divided into three steps, loading the table header, loading the table body, and loading the statistical rows.
//加载头部 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 = ''; }
When loading the table header, a method is used to obtain the alias based on the original column name.
//根据原始列名获取列的别名,并考虑是否隐藏列的情况 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 the getColumnName method, a column based on the original column name is used
//比如根据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; }
The specific code is as follows:
(function(){ var tableHelper = fucntion(){ var template = '', link = function(scope, element, attrs){ var headerCols = [], //表头列们 tableStart = '
The above is the knowledge shared by the editor about customizing a table using Directive in AngularJS. I hope it will be helpful to you.