先给大家说下表格的需求：
● 表格结构
namestreetage
> > >
4行

● 点击某个th，就对该列进行排序
● 可以给表头取别名
● 可以设置某个列是否显示
● 表格下方有一行显示总行数
我们希望表格按如下方式展示：

以上，datasource的数据源来自controller中$scope.customers,大致是{name: 'david',street: '1234 anywhere st.',age: 25,url: 'index.html'}这样的格式，具体略去。
columnmap负责给列取别名，并且决定是否显示某个列。
如何实现呢？
directive大致是这样的：
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);
具体来说，
首先要监视datasource的变化，一旦有变化，就重新加载表格。
scope.$watchcollection('datasource', render);//初始化表格function render(){if(scope.datasource && scope.datasource.length){table += tablestart;table += renderheader();table += renderrows() + tableend;//加载统计行rendertable();}}
加载表格大致分成了三个步骤，加载表头，加载表格体，加载统计行。
//加载头部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 -1){rows += '' + row[prop] + ' ';}}rows += '
';}rows = '' + rows + '';return rows;}//加载统计行function rendertable(){table += '
' + scope.datasource.length + '行
';element.html(table);table = '';}
加载表头的时候，用到了一个根据原始列名获取别名的方法。
//根据原始列名获取列的别名，并考虑是否隐藏列的情况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;}
在getcolumnname方法中，用到了一个根据原始列名
//比如根据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(){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 -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);}());
以上所述是小编给大家分享的angularjs中的directive自定义一个表格的相关知识，希望对大家有所帮助。