# 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相同。 ![image](https://s2.ax1x.com/2019/04/16/AxA4xK.png) [![Build Status](https://travis-ci.org/baukh789/GridManager.svg?branch=master&style=flat-square)](https://travis-ci.org/baukh789/GridManager) [![npm version](https://img.shields.io/npm/v/gridmanager-react.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager-react) [![npm downloads](https://img.shields.io/npm/dt/gridmanager-react.svg?style=flat-square)](https://www.npmjs.com/package/gridmanager-react) [![coverage](https://img.shields.io/codecov/c/github/baukh789/GridManager.svg?style=flat-square)](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 ; } // 组件: 空模板 function EmptyTemplate(props) { return (
{props.text}
); } // 组件: 标题 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': '前端相关' }; return ( ); } // 组件: 删除 function DeleteComponents(props) { const {index, row} = props; const deleteAction = event => { if(window.confirm(`确认要删除当前页第[${event.target.getAttribute('data-index')}]条的['${event.target.title}]?`)){ console.log('----删除操作开始----'); GridManager.refreshGrid(option.gridManagerName); console.log('数据没变是正常的, 因为这只是个示例,并不会真实删除数据.'); 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: '标题', 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: '作者', // 使用函数返回 dom node template: (username, row, index) => { return ( {username} ); } },{ key: 'createDate', remind: 'the createDate', width: '100px', text: '创建时间', sorting: 'DESC', // 使用函数返回 htmlString template: function(createDate, rowObject){ return new Date(createDate).toLocaleDateString(); } },{ key: 'lastDate', remind: 'the lastDate', width: '120px', text: '最后修改时间', sorting: '', // 使用函数返回 htmlString template: function(lastDate, rowObject){ return new Date(lastDate).toLocaleDateString(); } },{ key: 'action', remind: 'the action', width: '100px', disableCustomize: true, text: , // 快捷方式,将自动向组件的props增加row、index属性 template: }], supportRemind: true, isCombSorting: true, supportAjaxPage: true, supportSorting: true, ajaxData: 'http://www.lovejavascript.com/blogManager/getBlogList', ajaxType: 'POST', }; // 渲染回调函数 const callback = query => { console.log('callback => ', query); }; ReactDOM.render( , document.querySelector('#example') ); ``` ### 调用公开方法 > 通过ES6语法,将GridManager引入。 ```javascript import GridManager, {$gridManager} from 'gridmanager-react'; // 刷新 GridManager.refreshGrid('testReact'); // 或 $gridManager.refreshGrid('testReact'); // 更新查询条件 GridManager.setQuery('testReact', {name: 'baukh'}); // 或 $gridManager.setQuery('testReact', {name: 'baukh'}); // ...其它更多请直接访问API ``` ### 查看当前版本 ```javascript import GridManagerReact, {$gridManager} from 'gridmanager-react'; console.log('GridManagerReact 的版本=>', GridManagerReact.version); console.log('GridManager 的版本=>', $gridManager.version); ```