# GridManager-React **Repository Path**: baukh/GridManager-React ## Basic Information - **Project Name**: GridManager-React - **Description**: 基于 React 的 GridManager 封装, 用于便捷的在 React 中使用GridManager. 除过React特性外,其它API与GridManager API相同 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 0 - **Created**: 2019-07-30 - **Last Updated**: 2022-03-20 ## Categories & Tags **Categories**: webui **Tags**: None ## README # GridManager React[自3.0开始, 该库已与gridmanager合并] > 基于 React 的 GridManager 封装, 用于便捷的在 React 中使用GridManager. 除过React特性外,其它API与GridManager API相同。  [](https://travis-ci.org/baukh789/GridManager) [](https://www.npmjs.com/package/gridmanager-react) [](https://www.npmjs.com/package/gridmanager-react) [](https://codecov.io/gh/baukh789/GridManager) ## 实现功能 | 功能 | 描述 | | -: | :- | | 宽度调整 | 表格的列宽度可进行拖拽式调整 | | 位置更换 | 表格的列位置进行拖拽式调整 | | 配置列 | 可通过配置对列进行显示隐藏转换 | | 表头吸顶 | 在表存在可视区域的情况下,表头将一直存在于顶部 | | 列固定 | 指定某列固定在左侧或右侧 | | 排序 | 表格单项排序或组合排序 | | 分页 | 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能 | | 用户偏好记忆 | 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数 | | 序号 | 自动生成序号列 | | 全选 | 自动生成全选列 | | 导出 | 静态数据导出、动态数据导出、已选数据导出 | | 打印 | 当前页打印 | | 右键菜单 | 常用功能在菜单中可进行快捷操作 | | 过滤 | 通过对列进行过滤达到快速搜索效果 | | 合并 | 同一列下相同值的单元格可自动合并 | | 树表格 | 可通过配置快速实现树型表格结构 | | 行移动 | 可通过配置快速实现行位置移动 | ## API > 该文档为原生GridManager的文档,react版本除了在`columnData.text` `columnData.template` `topFullColumn.template`中可以使用react模版外,其它使用方式相同。 - [API](http://gridmanager.lovejavascript.com/api/index.html) ## Demo > 该示例为原生GridManager的示例,react版本除了在`columnData.text` `columnData.template` `topFullColumn.template`中可以使用react模版外,其它使用方式相同。 - [简单的示例](http://gridmanager.lovejavascript.com/demo/index.html) - [复杂的示例](http://develop.lovejavascript.com/node_modules/gridmanager/demo/index.html) ## Core code - [GridManager](https://github.com/baukh789/GridManager) - [jTool](https://github.com/baukh789/jTool) ## 开发环境 ES2015 + webpack + React + GridManager ## 项目中引用 - es2015引入方式 ```javascript import ReactGridManager from 'gridmanager-react'; import 'gridmanager-react/css/gm-react.css'; ``` ## 示例 ```html
``` ```javascript import ReactDOM from 'react-dom'; import React, { useState } from 'react'; import 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