• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

GridManager-React: 基于 React 的 GridManager 封装, 用于便捷的在 React 中使用Grid ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

GridManager-React

开源软件地址:

https://gitee.com/baukh/GridManager-React

开源软件介绍:


GridManager React

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

imageBuild Statusnpm versionnpm downloadscoverage

实现功能

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

示例

<div id="example"></div>
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 <span onClick={actionAlert} style={{display: 'block', color: 'red'}}>{props.text}</span>;}function ActionComponents(props) {    return <ActionInner text={props.text}/>;}// 组件: 空模板function EmptyTemplate(props) {    return (        <section style={{textAlign: 'center'}}>            {props.text}        </section>    );}// 组件: 标题function TitleComponents(props) {    return (        <a href={'https://www.lovejavascript.com/#!zone/blog/content.html?id=' + props.row.id} target={'_black'}>{props.row.title}</a>    );}// 组件: 类型function TypeComponents(props) {    // 博文类型    const TYPE_MAP = {        '1': 'HTML/CSS',        '2': 'nodeJS',        '3': 'javaScript',        '4': '前端鸡汤',        '5': 'PM Coffee',        '6': '前端框架',        '7': '前端相关'    };    return (        <button>{TYPE_MAP[props.type]}</button>    );}// 组件: 删除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 (        <span className={'plugin-action'} onClick={deleteAction} data-index={index} title={row.title}>删除</span>    );}// 表格组件配置const option = {    gridManagerName: 'testReact',    height: '100%',    emptyTemplate: <EmptyTemplate text={'这个React表格, 什么数据也没有'}/>,    columnData: [{        key: 'pic',        remind: 'the pic',        width: '110px',        text: '缩略图',        template: (pic, row) => {            return (                <img style={{width: '90px', margin: '0 auto'}} src={'https://www.lovejavascript.com' + pic} title={row.name}/>            );        }    },{        key: 'title',        remind: 'the title',        text: '标题',        template: <TitleComponents/>    },{        key: 'type',        remind: 'the type',        text: '分类',        align: 'center',        template: (type, row, index) => {            return <TypeComponents type={type}/>;        }    },{        key: 'info',        remind: 'the info',        text: '使用说明'    },{        key: 'username',        remind: 'the username',        text: '作者',        // 使用函数返回 dom node        template: (username, row, index) => {            return (                <a href={'https://github.com/baukh789'} target={'_black'}>{username}</a>            );        }    },{        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: <ActionComponents text={'操作'}/>,        // 快捷方式,将自动向组件的props增加row、index属性        template: <DeleteComponents/>    }],    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(    <GridManager        option={option} // 也可以将option中的配置项展开        height={'100%'} // 展开后的参数,会覆盖option中的值        callback={callback}    />,    document.querySelector('#example'));

调用公开方法

通过ES6语法,将GridManager引入。

import GridManager, {$gridManager} from 'gridmanager-react';// 刷新GridManager.refreshGrid('testReact'); // 或 $gridManager.refreshGrid('testReact');// 更新查询条件GridManager.setQuery('testReact', {name: 'baukh'}); // 或 $gridManager.setQuery('testReact', {name: 'baukh'});// ...其它更多请直接访问API

查看当前版本

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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap