React框架内使用GridManager

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

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

将GridManager配置为组件

// 定义表格组件
var ReactGridManager = React.createClass({
    render: function () {
        return ;
    },
    componentDidMount: function () {
        var table = document.querySelector('table[data-name="'+this.props.gridManagerName+'"]');
        table.GM(this.props);
    }
});

使用配置好的组件

// 配置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).format('YYYY-MM-DD HH:mm:ss');
        }
    },{
        key: 'lastDate',
        remind: 'the lastDate',
        width: '100px',
        text: '最后修改时间',
        sorting: '',
        template: function(lastDate, rowObject){
            return new Date(lastDate).format('YYYY-MM-DD HH:mm:ss');
        }
    },{
        key: 'action',
        remind: 'the action',
        width: '100px',
        text: '操作',
        template: function(action, rowObject){
            return '编辑'
                    +'删除';
        }
}];
var queryInfo = {pluginId: 1};
ReactDOM.render(
    

        
通过React 使用 GridManager
        
    
,
    document.querySelector('#example')
);

@拭目以待

个人站点：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公众账号：loveJavascript

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