In AngularJS, direve ve customizes a table, angularjsdireve ve

In AngularJS, direve ve customizes a table, angularjsdireve ve

Let's talk about the requirements of the following table:

● Table structure

<Table> <thead> <tr> <th> Name </th> <th> Street </th> <th> Age </th> </tr> </thead> <tbody> <tr> <td> </tr> </tbody> </table> <div> 4 rows </div>

● 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:

<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>

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 = '<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 + = '<th>' + val + '</th>';} tr + = '</tr> '; tr = '<thead>' + tr' </thead> '; return tr;} // load the row 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) {// 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 + = '<td>' + row [prop] + '</td> ';}} rows + = '</tr>';} rows = '<tbody>' + rows + '</tbody>'; return rows ;} // load the function renderTable () {table + = '<br/> <div class = "rowCount">' + scope. datasource. length + 'row </div> '{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 = '<div class = "tableHelper"> </div>', link = function (scope, element, attrs) {var headerCols = [], // tableStart = '<table>', tableEnd = '</table>', table = '', visibleProps = [], // visible column sortCol = null, // 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. datas Ource. 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. srcElement. 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 = '<tr> '; for (var prop in scope. datasource [0]) {// {name: 'David', street: '1 234 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 + = '<th>' + val + '</th>';} tr + = '</tr> '; tr = '<thead>' + tr' </thead> '; return tr;} // load the row 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 I N row) {// whether the original column name currently traversed is in the visibleProps set. The set stores the original column name if (visibleProps. indexOf (prop)>-1) {rows + = '<td>' + row [prop] + '</td> ';}} rows + = '</tr>';} rows = '<tbody>' + rows + '</tbody>'; return rows ;} // load the function renderTable () {table + = '<br/> <div class = "rowCount">' + scope. datasource. length + 'row </div> '{element.html (table); table = '';} // obtain the original column name function getRawColumnName (friendlyCol) {var rawCol Based on the column alias; // col Umnmap = [{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.

Articles you may be interested in:

• Directive in AngularJS implements delayed Loading
• AngularJS Getting Started: direve VE and controller communication process
• Create a menu for Directive in AngualrJS