基於 React 的 GridManager 封裝, 用於便捷的在 React 中使用GridManager. 除過React特性外,其它API與GridManager API相同。javascript
該文檔爲原生GridManager的文檔,react版本除了在
columnData.text
columnData.template
topFullColumn.template
中能夠使用react模版外,其它使用方式相同。css
該示例爲原生GridManager的示例,react版本除了在
columnData.text
columnData.template
topFullColumn.template
中能夠使用react模版外,其它使用方式相同。html
ES2015 + webpack + React + GridManager前端
import ReactGridManager, {$gridManager} from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';
複製代碼
<link rel="stylesheet" href="../node_modules/gridmanager-react/css/gm-react.css">
<script src="../node_modules/gridmanager-react/js/gm-react.js"></script>
複製代碼
<div id="example"></div>
複製代碼
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import ReactGridManager, { $gridManager } from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';
// 組件: 操做列
function ActionInner(props) {
const actionAlert = event => {
alert('操做欄th是由React模板渲染的');
};
return <span onClick={actionAlert} style={{display: 'block', color: 'red'}}>{props.text}</span>;
}
function ActionComponents(props) {
return <ActionInner text={props.text}/>;
}
// 組件: 空模板
function EmptyTemplate(props) {
return (
<section style={{textAlign: 'center'}}>
{props.text}
</section>
);
}
// 組件: 標題
function TitleComponents(props) {
return (
<a href={'https://www.lovejavascript.com/#!zone/blog/content.html?id=' + props.row.id} target={'_black'}>{props.row.title}</a>
);
}
// 組件: 類型
function TypeComponents(props) {
// 博文類型
const TYPE_MAP = {
'1': 'HTML/CSS',
'2': 'nodeJS',
'3': 'javaScript',
'4': '前端雞湯',
'5': 'PM Coffee',
'6': '前端框架',
'7': '前端相關'
};
return (
<button>{TYPE_MAP[props.type]}</button>
);
}
// 組件: 刪除
function DeleteComponents(props) {
const {index, row} = props;
const deleteAction = event => {
if(window.confirm(`確認要刪除當前頁第[${event.target.getAttribute('data-index')}]條的['${event.target.title}]?`)){
console.log('----刪除操做開始----');
$gridManager.refreshGrid(option.gridManagerName);
console.log('數據沒變是正常的, 由於這只是個示例,並不會真實刪除數據.');
console.log('----刪除操做完成----');
}
};
return (
<span className={'plugin-action'} onClick={deleteAction} data-index={index} title={row.title}>刪除</span>
);
}
// 表格組件配置
const option = {
gridManagerName: 'testReact',
height: '100%',
emptyTemplate: <EmptyTemplate text={'這個React表格, 什麼數據也沒有'}/>,
columnData: [{
key: 'pic',
remind: 'the pic',
width: '110px',
text: '縮略圖',
template: (pic, row) => {
return (
<img style={{width: '90px', margin: '0 auto'}} src={'https://www.lovejavascript.com' + pic} title={row.name}/>
);
}
},{
key: 'title',
remind: 'the title',
text: '標題',
template: <TitleComponents/>
},{
key: 'type',
remind: 'the type',
text: '分類',
align: 'center',
template: (type, row, index) => {
return <TypeComponents type={type}/>;
}
},{
key: 'info',
remind: 'the info',
text: '使用說明'
},{
key: 'username',
remind: 'the username',
text: '做者',
// 使用函數返回 dom node
template: (username, row, index) => {
return (
<a href={'https://github.com/baukh789'} target={'_black'}>{username}</a>
);
}
},{
key: 'createDate',
remind: 'the createDate',
width: '100px',
text: '建立時間',
sorting: 'DESC',
// 使用函數返回 htmlString
template: function(createDate, rowObject){
return new Date(createDate).toLocaleDateString();
}
},{
key: 'lastDate',
remind: 'the lastDate',
width: '120px',
text: '最後修改時間',
sorting: '',
// 使用函數返回 htmlString
template: function(lastDate, rowObject){
return new Date(lastDate).toLocaleDateString();
}
},{
key: 'action',
remind: 'the action',
width: '100px',
disableCustomize: true,
text: <ActionComponents text={'操做'}/>,
// 快捷方式,將自動向組件的props增長row、index屬性
template: <DeleteComponents/>
}],
supportRemind: true,
isCombSorting: true,
supportAjaxPage: true,
supportSorting: true,
ajax_data: 'http://www.lovejavascript.com/blogManager/getBlogList',
ajax_type: 'POST',
};
// 渲染回調函數
const callback = query => {
console.log('callback => ', query);
};
ReactDOM.render(
<ReactGridManager
option={option}
callback={callback}
/>,
document.querySelector('#example')
);
複製代碼
經過ES6語法,將$gridManager引入。java
import { $gridManager } from 'gridmanager-react';
// 刷新
$gridManager.refreshGrid('testReact');
// 更新查詢條件
$gridManager.setQuery('testReact', {name: 'baukh'});
// ...其它更多請直接訪問API
複製代碼
import GridManagerReact, {$gridManager} from 'gridmanager-react';
console.log('GridManagerReact 的版本=>', GridManagerReact.version);
console.log('GridManager 的版本=>', $gridManager.version);
複製代碼