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>
示例
<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