GridManager React

> 基于 React 的 GridManager 封装, 用于便捷的在 React 中使用GridManager. 除过React特性外，其它API与GridManager API相同。

实现功能

宽度调整: 表格的列宽度可进行拖拽式调整
位置更换: 表格的列位置进行拖拽式调整
配置列: 可通过配置对列进行显示隐藏转换
表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
排序: 表格单项排序或组合排序
分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号: 自动生成序号列
全选: 自动生成全选列
导出: 当前页数据下载,和仅针对已选中的表格下载
右键菜单: 常用功能在菜单中可进行快捷操作
过滤: 通过对列进行过滤达到快速搜索效果

API

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

Demo

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

Core code

开发环境

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>

示例

1<div id="example"></div>
2
3
4import ReactDOM from 'react-dom';
5import React, { useState } from 'react';
6import ReactGridManager, { $gridManager } from 'gridmanager-react';
7import 'gridmanager-react/css/gm-react.css';
8
9// 组件: 操作列
10function ActionInner(props) {
11    const actionAlert = event =&gt; {
12        alert('操作栏th是由React模板渲染的');
13    };
14    return <span onclick="{actionAlert}" style="{{display:" 'block', color: 'red'}}>{props.text}</span>;
15}
16
17function ActionComponents(props) {
18    return <actioninner text="{props.text}/">;
19}
20
21// 组件: 空模板
22function EmptyTemplate(props) {
23    return (
24        <section style="{{textAlign:" 'center'}}>
25            {props.text}
26        </section>
27    );
28}
29
30// 组件: 标题
31function TitleComponents(props) {
32    return (
33        <a href="{'https://www.lovejavascript.com/#!zone/blog/content.html?id='" + props.row.id} target="{'_black'}">{props.row.title}</a>
34    );
35}
36
37// 组件: 类型
38function TypeComponents(props) {
39    // 博文类型
40    const TYPE_MAP = {
41        '1': 'HTML/CSS',
42        '2': 'nodeJS',
43        '3': 'javaScript',
44        '4': '前端鸡汤',
45        '5': 'PM Coffee',
46        '6': '前端框架',
47        '7': '前端相关'
48    };
49    return (
50        <button>{TYPE_MAP[props.type]}</button>
51    );
52}
53
54// 组件: 删除
55function DeleteComponents(props) {
56    const {index, row} = props;
57    const deleteAction = event =&gt; {
58        if(window.confirm(`确认要删除当前页第[${event.target.getAttribute('data-index')}]条的['${event.target.title}]?`)){
59            console.log('----删除操作开始----');
60            $gridManager.refreshGrid(option.gridManagerName);
61            console.log('数据没变是正常的, 因为这只是个示例,并不会真实删除数据.');
62            console.log('----删除操作完成----');
63        }
64    };
65
66    return (
67        <span classname="{'plugin-action'}" onclick="{deleteAction}" data-index="{index}" title="{row.title}">删除</span>
68    );
69}
70
71// 表格组件配置
72const option = {
73    gridManagerName: 'testReact',
74    height: '100%',
75    emptyTemplate: <emptytemplate text="{'这个React表格," 什么数据也没有'} />,
76    columnData: [{
77        key: 'pic',
78        remind: 'the pic',
79        width: '110px',
80        text: '缩略图',
81        template: (pic, row) =&gt; {
82            return (
83                <img style="{{width:" '90px', margin: '0 auto'}} src="{'https://www.lovejavascript.com'" + pic} title="{row.name}/">
84            );
85        }
86    },{
87        key: 'title',
88        remind: 'the title',
89        text: '标题',
90        template: <titlecomponents />
91    },{
92        key: 'type',
93        remind: 'the type',
94        text: '分类',
95        align: 'center',
96        template: (type, row, index) =&gt; {
97            return <typecomponents type="{type}/">;
98        }
99    },{
100        key: 'info',
101        remind: 'the info',
102        text: '使用说明'
103    },{
104        key: 'username',
105        remind: 'the username',
106        text: '作者',
107        // 使用函数返回 dom node
108        template: (username, row, index) =&gt; {
109            return (
110                <a href="{'https://github.com/baukh789'}" target="{'_black'}">{username}</a>
111            );
112        }
113    },{
114        key: 'createDate',
115        remind: 'the createDate',
116        width: '100px',
117        text: '创建时间',
118        sorting: 'DESC',
119        // 使用函数返回 htmlString
120        template: function(createDate, rowObject){
121            return new Date(createDate).toLocaleDateString();
122        }
123    },{
124        key: 'lastDate',
125        remind: 'the lastDate',
126        width: '120px',
127        text: '最后修改时间',
128        sorting: '',
129        // 使用函数返回 htmlString
130        template: function(lastDate, rowObject){
131            return new Date(lastDate).toLocaleDateString();
132        }
133    },{
134        key: 'action',
135        remind: 'the action',
136        width: '100px',
137        disableCustomize: true,
138        text: <actioncomponents text="{'操作'}/">,
139        // 快捷方式，将自动向组件的props增加row、index属性
140        template: <deletecomponents />
141    }],
142    supportRemind: true,
143    isCombSorting:  true,
144    supportAjaxPage: true,
145    supportSorting: true,
146    ajax_data: 'http://www.lovejavascript.com/blogManager/getBlogList',
147    ajax_type: 'POST',
148};
149
150// 渲染回调函数
151const callback = query =&gt; {
152    console.log('callback =&gt; ', query);
153};
154
155ReactDOM.render(
156    <reactgridmanager option="{option}" callback="{callback}" />,
157    document.querySelector('#example')
158);

调用公开方法

> 通过ES6语法，将$gridManager引入。

1import { $gridManager } from 'gridmanager-react';
2
3// 刷新
4$gridManager.refreshGrid('testReact');
5
6// 更新查询条件
7$gridManager.setQuery('testReact', {name: 'baukh'});
8
9// ...其它更多请直接访问API

查看当前版本

1import GridManagerReact, {$gridManager} from 'gridmanager-react';
2console.log('GridManagerReact 的版本=&gt;', GridManagerReact.version);
3console.log('GridManager 的版本=&gt;', $gridManager.version);

</actioncomponents></typecomponents></actioninner>

React 表格组件 GridManager