Angular框架内使用GridManager

@拭目以待：首发于Angular框架内使用GridManager

GridManager- github地址是原生实现，不依赖任何框架。那么在Angular框架中如何将其便捷的使用?

直接粘一个demo示例

HTML

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 '编辑'
                    +'删除';
        }
    }];
    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 : '',
        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

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。