Home > Web Front-end > JS Tutorial > Directive in AngularJS to customize a table_AngularJS

Directive in AngularJS to customize a table_AngularJS

WBOY
Release: 2016-05-16 15:18:17
Original
1149 people have browsed it

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>
Copy after login

● 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>
Copy after login

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); 
Copy after login

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();
}
} 
Copy after login

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 = '';
} 
Copy after login

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;
}
Copy after login

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;
}
Copy after login

The specific code is as follows:

(function(){
var tableHelper = fucntion(){
var template = '
', link = function(scope, element, attrs){ var headerCols = [], //表头列们 tableStart = '', tableEnd = '
', table = '', visibleProps = [],//可见列 sortCol = null,//排序列 sortDir =1; //监视集合 sscope.$watchCollection('datasource', render); //给表头th绑定事件 wireEvents(); //初始化表格 function render(){ if(scope.datasource && scope.datasource.length){ table += tableStart; table += renderHeader(); table += renderRows() + tableEnd; //加载统计行 renderTable(); } } //给th添加click事件 function wireEvents() { element.on('click', function(event){ if(event.srcElement.nodeName === 'TH'){ //获取列的名称 var val = event.srcElement.innerHTML; //根据列的别名获取原始列名 var col = (scope.columnmap) ? getRawColumnName(val) : val; if(col){ //对该列进行排序 sort(col); } } }); } //给某列排序 function sort(col){ if(sortCol === col){ sortDir = sortDir * -1; } sortCol = col; scope.datasource.sort(function(a,b){ if(a[col] > b[col]) return 1 * sortDir; if(a[col] < b[col]) return -1 * sortDir; return 0; }); //重新加载表格 render(); } //加载头部 function renderHeader(){ var 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 += '' + val + ''; } } tr += ''; tr = '' + tr ''; return tr; } //加载行 function renderRows(){ var rows = ''; for(var i = 0, len = scope.datasource.length; i < len; i++){ rows += ''; var row = scope.datasource[i]; for(var prop in row){ //当前遍历的原始列名是否在visibleProps集合中,该集合存储的是原始列名 if(visibleProps.indexOf(prop) > -1){ rows += '' + row[prop] + ''; } } rows += ''; } rows = '' + rows + ''; return rows; } //加载统计行 function renderTable(){ table += '
' + scope.datasource.length + '行
'; element.html(table); table = ''; } //根据列的别名获取原始列名 function getRawColumnName(friendlyCol) { var rawCol; //columnmap =[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}] scope.columnmap.forEach(function(colMap) { //{name: 'Name'} for (var prop in colMap) { if (colMap[prop] === friendlyCol) { rawCol = prop; break; } } return null; }); return rawCol; } function pushColumns(rawCol, renamedCol) { visibleProps.push(rawCol); scope.columns.push(renamedCol); } //比如根据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; } //根据原始列名获取列的别名,并考虑是否隐藏列的情况 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; } }; return { restrict: 'E', scope: { columnmap: '=', datasource: '=' }, link:link, template:template }; }; angular.module('directiveModule') .directive('tableHelper', tableHelper); }());
Copy after login

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.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template