Angular框架内使用GridManager

angular,girdmanager

拭目以待 发布于

GridManager是原生实现,不依赖任何框架。那么在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 必要参数
	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: '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);
			}
		}
	};
});