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

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

将GridManager配置为组件

// 定义表格组件
var ReactGridManager = React.createClass({
    render: function () {
        return <table data-name={this.props.gridManagerName}></table>;
    },
    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 '<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};
ReactDOM.render(
    <div>
        <h1>通过React 使用 GridManager</h1>
        <ReactGridManager
                gridManagerName="testReact"
                height="auto"
                columnData={colData}
                supportRemind={true}
                isCombSorting= {true}
                supportAjaxPage={true}
                supportSorting={true}
                ajax_url="http://www.lovejavascript.com/learnLinkManager/getLearnLinkList"
                ajax_type="POST"
                query= {queryInfo}
                pageSize={30}
        />
    </div>,
    document.querySelector('#example')
);

@拭目以待

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

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