【angularjs中directive】AngularJS中的Directive自定义一个表格-自定义directive

(function(){
var tableHelper=fucntion(){
var template='<div class="tableHelper"></div>',
link=function(scope, element, attrs){
var headerCols=[], //表头列们
tableStart='<table>',
tableEnd='</table>',
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='<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='';
}
//根据列的别名获取原始列名
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自定义一个表格的用户互动如下：

　　相关问题：angularjs使用什么绘制表格

　　答：如果你只是简单的绘制表格的话,可以使用ng-repeat指令,循环数据内容,绘制每行 如果你想让表格高端大气点,可以上网搜ng-table,是一个第三方的表格插件,https://github.com/esvit/ng-table上有demo >>详细

　　相关问题：AngularJS的指令 compile和link的区别及使用示例

　　答：如果我想实现这样一个功能，当一个input失去光标焦点时(blur)，执行一些语句，比如当输入用户名后，向后台发ajax请求查询用户名是否已经存在，好有及时的页面相应。 输入 camnpr angularjs directive input focus 失去焦点后提示 camnpr 这个用... >>详细

　　相关问题：如何自定义iOS中的控件

　　答：AngularJS的directive，你输入特定数据，他就能输出相应UI视图，这样的directive可以变成了一个html通用组件，比如文章编辑器组件、分页导航组件、madal组件等，在不同应用中可以直接拿来用，减少重复开发。我想，Backbone大概很难实现这样的通... >>详细