@拭目以待：首發(fā)于Angular框架內(nèi)使用GridManager

GridManager- github地址是原生實現(xiàn)，不依賴任何框架肛炮。那么在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 必要參數(shù)
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: '創(chuàng)建時間',
        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

《野生前端工程師》專輯中所有文章均為@拭目以待 原創(chuàng)惊橱，轉(zhuǎn)載請注明出處蚪腐。