直接粘一个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 必要参数
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: '创建时间',
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:
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);
}
}
};
});