npm包 frypan-react-mobx-grid使用教程

阅读时长 6 分钟读完

介绍

frypan-react-mobx-grid是一个用于制作可编辑数据表格的React组件库。它是基于React和MobX构建的,用于简化了React表格的数据管理。

安装

安装npm包:

用法

以下是一个简单的示例,展示如何使用frypan-react-mobx-grid来创建一个带有编辑功能的数据表格:

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------- - ---- -------------
------ - ----- ------ - ---- -------------------------

----- --- ------- --------- -
  -------- -
    ----- ----- - -
      ----- -
        - ----- -------- ------ ---- --
        - ----- --------- ------ ---- --
        - ----- --------- ------ ---- --
      --
      ---- ------ -- -
        ----------------------
      --
      ------- ------- -- -
        ------------------------ ---
      --
      ------- ------- ----- -- -
        ----------------- - -----
      --
    --

    ------ -
      ----- --------------
        ------- ------------ ------------ --
        ------- ------------- ------------- --
      -------
    --
  -
-

------ ------- --------------

在上面的示例中,我们首先定义了一个store对象,它保存我们的数据和一些操作数据的方法,如添加、删除和更新项。接着,我们创建了Grid和Column组件,并从store中获取数据和方法。最后,我们将Grid和Column组件渲染到页面上。

API

<Grid />

Grid组件用于包裹我们的表格,并且从store中获取数据和操作数据的方法。

Props

store

类型: Object

必需项。

一个对象,包含着我们的数据和一些操作数据的方法。

editable

类型: boolean

一个布尔值,表示表格是否可以编辑。默认为true。

emptyText

类型: string

一个字符串,表示当表格没有任何数据时,显示在表格上的文本。默认为"No data."

height

类型: number/string

一个数字或字符串,表示表格的高度。默认为"auto"。

loading

类型: boolean

一个布尔值,表示是否正在加载数据。默认为false。

onAdd

一个回调函数,当添加数据时被调用。

onDelete

一个回调函数,当删除数据时被调用。

onUpdate

一个回调函数,当更新数据时被调用。

plugins

类型: Array

一个数组,表示需要使用的插件。默认为空数组。

selection

类型: boolean/object

一个布尔值或对象,表示是否启用单元格选择。默认为false。

如果启用了单元格选择,可以使用以下选项:

Properties

mode:表示选择模式。支持的值为:"cell"(单元格选择模式)或 "row"(行选择模式)。默认为"cell"。

onChange:选择单元格或行后的回调函数。

<Column />

Column组件用于表示表格的每一列,并且从store中获取该列的数据。

Props

field

类型: string

必需项。

一个字符串,表示该列的数据在store中的属性名。

title

类型: string

一个字符串,表示该列的标题。

width

类型: number/string

一个数字或字符串,表示该列的宽度。默认为100。

editor

类型: function

一个函数,用于自定义该列的编辑器。函数应当返回一个React组件。

插件

frypan-react-mobx-grid包含了以下可选插件:

FilterPlugin

FilterPlugin用于为表格添加筛选功能。

Props
fields

类型: Object

必需项。

一个对象,表示每列的筛选条件。对象的属性名应当对应每列的数据属性名,在每列中可以设置如下条件:

emptyText:该列没有数据时显示的文本。

filterType:筛选数据时所使用的过滤器类型。过滤器可以是以下之一:"like"(表示匹配),"eq"(表示相等),"neq"(表示不相等),"gte"(表示大于或等于),"gt"(表示大于),"lte"(表示小于或等于),或 "lt"(表示小于)。默认为"like"。

filterValue:筛选数据所使用的匹配值。

PaginationPlugin

PaginationPlugin用于为表格添加分页功能。

Props
current

类型: number

必需项。

一个数字,表示当前页码数。

pageSize

类型: number

一个数字,表示每页的数据量。

pageSizeOptions

类型: Array

一个数组,表示分页器所支持的每页数据量选项。默认为[10, 20, 50, 100]。

totalRecords

类型: number

一个数字,表示数据的总记录数。

onChange

类型: function

当页数或每页数据量发生变化时调用的回调函数。该函数接受两个参数:page(表示变化后的页码数)和 pageSize(表示变化后每页的数据量)。

结论

frypan-react-mobx-grid是一个非常简单但实用的组件库,可以帮助在React应用中快速实现可编辑的数据表格,并且也提供了可自定义的插件。如果你正在寻找一种简单的方法来管理React数据,我强烈建议你试试这个库。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600560c081e8991b448df096

纠错
反馈