React 表格組件 GridManager-React

GridManager React

基於 React 的 GridManager 封裝, 用於便捷的在 React 中使用GridManager. 除過React特性外，其它API與GridManager API相同。

實現功能

• 寬度調整: 表格的列寬度可進行拖拽式調整
• 位置更換: 表格的列位置進行拖拽式調整
• 配置列: 可經過配置對列進行顯示隱藏轉換
• 表頭吸頂: 在表存在可視區域的狀況下,表頭將一直存在於頂部
• 排序: 表格單項排序或組合排序
• 分頁: 表格ajax分頁,包含選擇每頁顯示總條數和跳轉至指定頁功能
• 用戶偏好記憶: 記住用戶行爲,含用戶調整的列寬、列順序、列可視狀態及每頁顯示條數
• 序號: 自動生成序號列
• 全選: 自動生成全選列
• 導出: 當前頁數據下載,和僅針對已選中的表格下載
• 右鍵菜單: 經常使用功能在菜單中可進行快捷操做
• 過濾: 經過對列進行過濾達到快速搜索效果

API

該文檔爲原生GridManager的文檔，react版本除了在 columnData.text columnData.template topFullColumn.template中能夠使用react模版外，其它使用方式相同。

• API

Demo

該示例爲原生GridManager的示例，react版本除了在 columnData.text columnData.template topFullColumn.template中能夠使用react模版外，其它使用方式相同。

• 簡單的示例
• 複雜的示例

Core code

• GridManager
• jTool

開發環境

ES2015 + webpack + React + GridManager

項目中引用

• es2015引入方式

import ReactGridManager, {$gridManager} from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';

• 經過script標籤引入

<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引入。

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);