React 表格组件 GridManager-React

2019-06-12 admin

基于 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

项目中引用

import ReactGridManager, {$gridManager} from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';
<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 <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,
    ajax_data: 'http://www.lovejavascript.com/blogManager/getBlogList',
    ajax_type: 'POST',
};

// 渲染回调函数
const callback = query => {
    console.log('callback => ', query);
};

ReactDOM.render(
    <ReactGridManager
        option={option}
        callback={callback}
    />,
    document.querySelector('#example')
);

调用公开方法

通过ES6语法,将$gridManager引入。

import { $gridManager } from 'gridmanager-react';

// 刷新
$gridManager.refreshGrid('testReact');

// 更新查询条件
$gridManager.setQuery('testReact', {name: 'baukh'});

// ...其它更多请直接访问API

查看当前版本

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

[转载]原文链接:https://segmentfault.com/a/1190000019455182

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67118.html

文章标题:React 表格组件 GridManager-React

相关文章
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
bootstrap table 数据表格行内修改的实现代码
js中设置列的属性 editable : { type : &#x27;text&#x27;,&#x2F;&#x2F;数据显示在文本框内 emptytext : &quot;--&quot;,&#x2F;&#x2F;数据为空时显示 vali...
2017-03-14
JavaScript实现将xml转换成html table表格的方法
本文实例讲述了JavaScript实现将xml转换成html table表格的方法。分享给大家供大家参考。具体如下: function ConvertToTable(targetNode) { &#x2F;&#x2F; if the ta...
2017-03-22
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
JS实现两表格里数据来回转移的方法
本文实例讲述了JS实现两表格里数据来回转移的方法。分享给大家供大家参考。具体分析如下: 最近做项目里用到了一个 两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮 感觉写得有点繁琐了,有时间再改进哈 &lt;!DOCTYPE ...
2017-03-24
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: &lt;el-upload :action=&quot;uploadActionUrl&quot;&...
2018-03-18
回到顶部