Directive in AngularJS customizes a table _ AngularJS

This article introduces you to customizing a direve ve related to tables in angularjs. It involves angularjsdireve related knowledge. If you are interested in this article, let's learn about the requirements of the following table:

● Table structure

 
 

  
  
 
   
 
    
Name
 
    
Street
 
    
Age
 
   
 
  
  
  
 
   
 
    
>
 
    
>
 
    
>
 
   
 
  
 
 
4 rows

● Click a th to sort the column.
● Aliases can be obtained for the header.
● You can set whether a column is displayed.
● A row below the table shows the total number of rows

We want the table to be displayed as follows:

The data source of datasource comes from $ scope in controller. customers, which is roughly {name: 'David ', street: '2017 Anywhere St. ', age: 25, url: 'index.html.

Columnmap is responsible for getting the column alias and deciding whether to display a column.

How to implement 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, you must monitor the datasource changes and reload the table.

Scope. $ watchCollection ('datasource ', render); // initialize the function render () {if (scope. datasource & scope. datasource. length) {table + = tableStart; table + = renderHeader (); table + = renderRows () + tableEnd; // load the renderTable ();}}

Loading a table is roughly divided into three steps: loading the table header, loading the table body, and loading the statistical rows.

// Load the header function renderHeader () {var tr =''; For (var prop in scope. datasource [0]) {// {name: 'David', street: '2017 Anywhere St. ', age: 25, url: 'index.html'} // obtain the alias based on the original column name, and check whether the column is displayed. var val = getColumnName (prop); if (val) {// visibleProps stores the original column name visibleProps. push (prop); tr + =''+ Val +'';} Tr + =''; Tr =''+ Tr''; Return tr;} // load the row 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) {// whether the original column name currently traversed is in the visibleProps set. This set stores the original column name if (visibleProps. indexOf (prop)>-1) {rows + =''+ Row [prop] +'';}} Rows + ='';} Rows =''+ Rows +''; Return rows;} // load the statistical row function renderTable () {table + ='
'+ Scope. datasource. length +' row
'Your element.html (table); table = '';}

When loading the table header, a method is used to obtain the alias based on the original column name.

// Obtain the column alias based on the original column name and determine whether to hide the column. function getColumnName (prop) {if (! Scope. columnmap) return prop; // get [{name: 'name'}] var val = filterColumnMap (prop); if (val & val. length &&! Val [0]. hidden) return val [0] [prop]; else return null ;}

In the getColumnName method, an original column name is used.

// For example, based on the name attribute, [{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 Code is as follows:

(Function () {var tableHelper = fucntion () {var template ='
', Link = function (scope, element, attrs) {var headerCols = [], // tableStart ='
 
 
  
  
', TableEnd ='
 
 ', Table = '', visibleProps = [], // visible column sortCol = null, // sort column sortDir = 1; // monitoring set sscope. $ watchCollection ('datasource ', render); // bind the event wireEvents () to the header th; // initialize the table function render () {if (scope. datasource & scope. datasource. length) {table + = tableStart; table + = renderHeader (); table + = renderRows () + tableEnd; // load the renderTable ();}} // Add the click Event function wireEvents () {element to th. on ('click', function (event) {if (event. srcE Lement. nodeName = 'th') {// obtain the column name var val = event. srcElement. innerHTML; // obtain the original column name var col = (scope. columnmap )? GetRawColumnName (val): val; if (col) {// sort this column 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;}); // reload the table render ();} // load the header function renderHeader () {var tr =''; For (var prop in scope. datasource [0]) {// {name: 'David', street: '2017 Anywhere St. ', age: 25, url: 'index.html'} // obtain the alias based on the original column name, and check whether the column is displayed. var val = getColumnName (prop); if (val) {// visibleProps stores the original column name visibleProps. push (prop); tr + =''+ Val +'';} Tr + =''; Tr =''+ Tr''; Return tr;} // load the row 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) {// whether the original column name currently traversed is in the visibleProps set. This set stores the original column name if (visibleProps. indexOf (prop)>-1) {rows + =''+ Row [prop] +'';}} Rows + ='';} Rows =''+ Rows +''; Return rows;} // load the statistical row function renderTable () {table + ='
'+ Scope. datasource. length +' row
'Your element.html (table); table = '';} // obtain the original column name 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);} // For example, based on the name attribute, [{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 ;}// obtain the column alias based on the original column name, and whether to hide the column. function getColumnName (prop) {if (! Scope. columnmap) return prop; // get [{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 ('ctictivemodule '). directive ('tablehelper ', tableHelper );}());

The above is a small Editor to share with you the Directive in AngularJS to customize a table related knowledge, I hope to help you.