摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。刷新更新查詢條件其它更多請(qǐng)直接訪問查看當(dāng)前版本的版本的版本

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

寬度調(diào)整: 表格的列寬度可進(jìn)行拖拽式調(diào)整

位置更換: 表格的列位置進(jìn)行拖拽式調(diào)整

配置列: 可通過配置對(duì)列進(jìn)行顯示隱藏轉(zhuǎn)換

表頭吸頂: 在表存在可視區(qū)域的情況下,表頭將一直存在于頂部

排序: 表格單項(xiàng)排序或組合排序

分頁: 表格ajax分頁,包含選擇每頁顯示總條數(shù)和跳轉(zhuǎn)至指定頁功能

用戶偏好記憶: 記住用戶行為,含用戶調(diào)整的列寬、列順序、列可視狀態(tài)及每頁顯示條數(shù)

序號(hào): 自動(dòng)生成序號(hào)列

全選: 自動(dòng)生成全選列

導(dǎo)出: 當(dāng)前頁數(shù)據(jù)下載,和僅針對(duì)已選中的表格下載

右鍵菜單: 常用功能在菜單中可進(jìn)行快捷操作

過濾: 通過對(duì)列進(jìn)行過濾達(dá)到快速搜索效果

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

API

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

簡(jiǎn)單的示例

復(fù)雜的示例

GridManager

jTool

ES2015 + webpack + React + GridManager

es2015引入方式

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

通過script標(biāo)簽引入

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 {props.text};
}

function ActionComponents(props) {
    return ;
}

// 組件: 空模板
function EmptyTemplate(props) {
    return (
        

            {props.text}
        
    );
}

// 組件: 標(biāo)題
function TitleComponents(props) {
    return (
        {props.row.title}
    );
}

// 組件: 類型
function TypeComponents(props) {
    // 博文類型
    const TYPE_MAP = {
        "1": "HTML/CSS",
        "2": "nodeJS",
        "3": "javaScript",
        "4": "前端雞湯",
        "5": "PM Coffee",
        "6": "前端框架",
        "7": "前端相關(guān)"
    };
    return (
        {TYPE_MAP[props.type]}
    );
}

// 組件: 刪除
function DeleteComponents(props) {
    const {index, row} = props;
    const deleteAction = event => {
        if(window.confirm(`確認(rèn)要?jiǎng)h除當(dāng)前頁第[${event.target.getAttribute("data-index")}]條的["${event.target.title}]?`)){
            console.log("----刪除操作開始----");
            $gridManager.refreshGrid(option.gridManagerName);
            console.log("數(shù)據(jù)沒變是正常的, 因?yàn)檫@只是個(gè)示例,并不會(huì)真實(shí)刪除數(shù)據(jù).");
            console.log("----刪除操作完成----");
        }
    };

    return (
        刪除
    );
}

// 表格組件配置
const option = {
    gridManagerName: "testReact",
    height: "100%",
    emptyTemplate: ,
    columnData: [{
        key: "pic",
        remind: "the pic",
        width: "110px",
        text: "縮略圖",
        template: (pic, row) => {
            return (
                
            );
        }
    },{
        key: "title",
        remind: "the title",
        text: "標(biāo)題",
        template: 
    },{
        key: "type",
        remind: "the type",
        text: "分類",
        align: "center",
        template: (type, row, index) => {
            return ;
        }
    },{
        key: "info",
        remind: "the info",
        text: "使用說明"
    },{
        key: "username",
        remind: "the username",
        text: "作者",
        // 使用函數(shù)返回 dom node
        template: (username, row, index) => {
            return (
                {username}
            );
        }
    },{
        key: "createDate",
        remind: "the createDate",
        width: "100px",
        text: "創(chuàng)建時(shí)間",
        sorting: "DESC",
        // 使用函數(shù)返回 htmlString
        template: function(createDate, rowObject){
            return new Date(createDate).toLocaleDateString();
        }
    },{
        key: "lastDate",
        remind: "the lastDate",
        width: "120px",
        text: "最后修改時(shí)間",
        sorting: "",
        // 使用函數(shù)返回 htmlString
        template: function(lastDate, rowObject){
            return new Date(lastDate).toLocaleDateString();
        }
    },{
        key: "action",
        remind: "the action",
        width: "100px",
        disableCustomize: true,
        text: ,
        // 快捷方式，將自動(dòng)向組件的props增加row、index屬性
        template: 
    }],
    supportRemind: true,
    isCombSorting:  true,
    supportAjaxPage: true,
    supportSorting: true,
    ajax_data: "http://www.lovejavascript.com/blogManager/getBlogList",
    ajax_type: "POST",
};

// 渲染回調(diào)函數(shù)
const callback = query => {
    console.log("callback => ", query);
};

ReactDOM.render(
    ,
    document.querySelector("#example")
);

通過ES6語法，將$gridManager引入。

import { $gridManager } from "gridmanager-react";

// 刷新
$gridManager.refreshGrid("testReact");

// 更新查詢條件
$gridManager.setQuery("testReact", {name: "baukh"});

// ...其它更多請(qǐng)直接訪問API

import GridManagerReact, {$gridManager} from "gridmanager-react";
console.log("GridManagerReact 的版本=>", GridManagerReact.version);
console.log("GridManager 的版本=>", $gridManager.version);