@拭目以待：首發(fā)于Angular框架內(nèi)使用GridManager
GridManager- github地址是原生實現(xiàn)，不依賴任何框架。那么在Angular框架中如何將其便捷的使用?
直接粘一個demo示例
HTML
<body ng-app="myApp">
<div ng-controller="gm">
<angular-grid-manager
option="option"
></angular-grid-manager>
</div>
</body>
JavaScript
var app = angular.module("myApp", []);
app.controller('gm', function($scope){
// 配置GridManager init 必要參數(shù)
var colData = [{
key: 'name',
remind: 'the name',
width: '100px',
text: '名稱',
sorting: ''
},{
key: 'info',
remind: 'the info',
text: '使用說明'
},{
key: 'url',
remind: 'the url',
text: 'url'
},{
key: 'createDate',
remind: 'the createDate',
width: '100px',
text: '創(chuàng)建時間',
sorting: 'DESC',
template: function(createDate, rowObject){
return new Date(createDate);
}
},{
key: 'lastDate',
remind: 'the lastDate',
width: '100px',
text: '最后修改時間',
sorting: '',
template: function(lastDate, rowObject){
return new Date(lastDate);
}
},{
key: 'action',
remind: 'the action',
width: '100px',
text: '操作',
template: function(action, rowObject){
return '<span class="plugin-action edit-action" learnLink-id="'+rowObject.id+'">編輯</span>'
+'<span class="plugin-action del-action" learnLink-id="'+rowObject.id+'">刪除</span>';
}
}];
var queryInfo = {pluginId: 1};
$scope.option = {
gridManagerName: 'testAngular',
height: '400px',
columnData: colData,
supportRemind: true,
isCombSorting: true,
supportAjaxPage: true,
supportSorting: true,
ajax_url: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
ajax_type: 'POST',
query: queryInfo,
pageSize: 20,
ajax_success: function(){
console.log(arguments);
},
pagingAfter: function () {
console.log('pagingAfter');
}
};
});
// 添加一個指令
app.directive("angularGridManager", function() {
return {
restrict : 'E',
scope: {
option: '='
},
template : '<table></table>',
compile: function(element, arg){
return function($scope){
var table = element[0].querySelector('angular-grid-manager table');
table.GM($scope.option);
}
}
};
});
@拭目以待
個人站點：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公眾賬號：loveJavascript
