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