React 表格组件 GridManager-React

GridManager React是基于React的表格组件,提供便捷的表格操作。它与原生GridManager API相似,支持React模版,并包含各种功能、API、示例和核心代码。开发环境基于ES2015、webpack和React,可通过ES2015引入或script标签方式在项目中使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

GridManager React

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

image

实现功能

功能 描述
宽度调整 表格的列宽度可进行拖拽式调整
位置更换 表格的列位置进行拖拽式调整
配置列 可通过配置对列进行显示隐藏转换
表头吸顶 在表存在可视区域的情况下,表头将一直存在于顶部
列固定 指定某列固定在左侧或右侧
排序 表格单项排序或组合排序
分页 表格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 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值