🏆 React ？Vue? Table？ ===> Gri

image.png

     GridManager 是一套可快速、灵活的对table标签进行实例化的表格组件。使用简单快捷, 功能强大，基于原生js实现, 不依赖任何框架，目前支持react、vue、angularjs三大框架。今天就来说一说，gridmanager在react中的使用。

引入

        基于目前前端项目多数使用webpack或其他工具进行打包部署，所以可以直接通过package.json中安装gridmanager-react包，在项目中使用import进行引入，同时也需要引入所需的css文件。

import ReactGridManager 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>

使用

基础配置

在使用gridManager时，有几个必须配置的属性，分别是：

• gridManagerName 表格唯一名称
• columnData 表格列配置
• ajaxData 表格获取数据

当未设置gridManagerName时，控制台会给出友好提示：

image.png

可以直接在组件中设置各种属性，如：

image.png

也可以统一使用option属性进行管理：

image.png
通过设置这三个必须的参数后，就可以展示一个灵活的表格了：
image.png

更多属性配置

gridManager具有十分丰富、灵活的属性配置，如序号支持、排序、多选、单选、列宽度调整、用户习惯记忆、右键菜单、行或列拖拽移动、复杂表头、表头嵌套、底部翻页自定义、树型列、通栏、导出excel等等功能。这里我们只展示平常用的最多、且功能强大的几个属性，更多的设置可通过官方API文档查看。

基础列配置：

在columnData中，配置相关的列，具有不同的配置项：

{
    key: 'name',
    width: '110px',
    text: '信息',
    template: name => <span>{name}</span>
}

key: 列的唯一索引。字符串类型，必设项；

text: 列显示文本；

isShow: 是否显示该列；

disableCustomize: 是否禁用该列自定义个性配置；

disableMoveRow: 是否禁用该列移动；

disableRowCheck: 是否禁用该列触发行选中事件；

merge: 是否将相同数据列合并，在配置template的情况下会以执行结果
进行比对，两种值: 'text'指定比对td.innerText, 'html'指定比对td.innerHTML；

width: 列宽度；

align: 列对齐方式，三种值: 'left', 'center', 'right'；

fixed: 固定该列，默认undefined，两种值: 'left', 'right'；

sorting: 列排序，'DESC': 该列支持排序，'ASC': 该列支持排序，空则不显示排序；

remind: 列表头提醒，对象类型；

filter: 列表头筛选条件配置；

template: 自定义列模版；

children：子项配置, 通过该项可以实现嵌套表头；

通栏设置：fullColumn

• 使用：支持顶部与底部通栏，以及是否使用折叠，行间距等属性；

  
  image.png

• 展示效果：

  
  image.png

数据返回设置：ajaxData

• 使用：ajaxData支持多种类型，包括：url string、response data、function，其中function的返回支持三种类型：promise、url string、response data；

• 使用场景：

  1. 当想使用静态数据时，可以通过使用response data，在项目中将返回数据写成常量，方便测试；
  2. 当使用axios等工具时，如果直接返回的是promise，则无需再通过then进行返回数据获取，组件会进行promise结果的相关处理；
  3. 当返回数据与要展示的数据存在差异需要进行相关数据处理时，使用function类型在函数中执行相关的处理逻辑，最后将处理后的数据return即可。

carbon.png

请求类型：ajaxType

• 默认值: 'GET'
• 使用：ajaxType请求类型，分为'GET' 和 'POST'两种类型，配置项ajaxData的值(或函数的返回值)为string url时， ajaxType才会生效。如后端如果使用GraphQL，多数使用的是Post方法，则获取表格数据的接口对应的就可以通过该参数设置为Post；

指定返回数据列表的key键值: dataKey

• 默认值：'data'

• 使用：当后端接口中返回的key值不为'data'时，可通过该属性进行配置，如我这里接口返回的列对应的key值时'test'，则需要配置dataKey属性为'test'，即可。通常情况下，企业的项目返回的字段名称多数会保持一致，但难免会出现需要适配不同人开发出来不同接口的且字段不同的情况，该属性就可以完美解决。

  
  image.png

复选框配置：checkboxConfig

• 使用：通过使用checkboxConfig可以在使用复选时进行相关的配置，如是否通过点击行进行选中，是否设置最多选中数量，使用单选还是多选。在使用该属性时，必须将supportCheckbox属性设置为true。
  image.png

• 效果：在这里我设置了最多可选择1条，且支持行点击选中，当选择1条后，其余的复选框则会置灰不可选。

  
  image.png

底部分页模版：ajaxPageTemplate

• 使用：该属性可用于自定义底部分页区域，要设置该属性，必须将supportAjaxPage属性设置为true，在该模版中通过拿到相应的数据，可以自由的写css控制样式，默认模版

• 默认效果：

  
  image.png
• 自定义后的效果：我设置的模版 基于ant-design的模版
  image.png

当然，你也可以像我一样自己写一套皮肤，用在自己的项目中。

翻页相关配置:

• useNoTotalsMode：默认为false，是否使用无总页模式，因为当后端数据量过大，可能要获取总条数来计算总页数的时间会很长，该属性则是不再展示总条数与总页数，只显示翻页。
  

  image.png

• sizeDataArray：默认[10,20,30,50,100]，配置每页显示条数的下拉项，数组元素仅允许为正整数。

• pageSize：默认20，配置初次进入时每页的显示条数，需要与sizeData中的值匹配。

• asyncTotals：默认undefined，配置异步分页模式, 通过该配置可以提升当前页的加载性能.当useNoTotalsMode:true 时，该配置失效。 当ajaxData返回数据小于当前页显示条数时，handler中的函数不再执行。

• totalsKey ：默认‘totals’，指定返回数据总条数的key键值。在接口返回数据格式不匹配时，可以通过该配置项进行修改。

• currentPageKey：默认‘cPage’，请求参数中当前页key键值。

• pageSizeKey：默认‘pSize’，请求参数中每页显示条数key健值。

其他常用配置:

• skinClassName：默认‘’，开发独立皮肤时可通过该属性定位css，方便修改覆盖。
• disableLine：默认false，配置是否禁用单元格分割线。
• disableBorder：默认false，配置是否禁用边框线。
• loadingTemplate：数据加载中模板，该配置可以自定义数据加载时使用的loading样式，与ajaxTeemplate使用方式类似。
• supportConfig：默认false，配置是否支持列表配置功能，可手动显示/隐藏列。
• supportMenu：默认true，配置是否支持右键菜单功能，禁用后右键功能将失效。
• supportAdjust：默认true，用于配置是否支持宽度调整功能。
• supportDrag：默认true，用于配置是否支持列的拖拽功能。
• supportTreeData：默认false，用于配置是否支持树型表格，配置树型数据后行移动功能将无效。

......

总结

    以上内容仅仅是gridManager中一小部分的功能，想要知道更多的功能可以通过官网地址查看；

    总的来说，gridManager真的是功能强大，灵活配置，并且占用包体积小，且能够在框架间无缝切换，即便你之前只写过Vue，现在要通过React重构，使用它也只是需要更改一下columnData中的template属性即可，其他的配置项基本可以直接复制粘贴，我从angularjs切换到react时，项目中用到了大概10多个表格，只用了一上午时间无脑复制粘贴就可以完成，铁子们快来试试吧！！！

参考

https://gridmanager.lovejavascript.com/index.html

https://gridmanager.lovejavascript.com/api/index.html

https://github.com/baukh789/GridManager

https://www.npmjs.com/package/gridmanager

A&Q

https://github.com/baukh789/GridManager/issues