npm 包 griddle-overhaul-subgrid-plugin 使用教程

阅读时长 5 分钟读完

简介

Griddle 是一个React 表格组建,它提供了可以快速构建网格的方法。 Griddle-overhaul-subgrid-plugin 是一款可扩展的子网格插件,为 Griddle 提供了一个可以更好地组织和显示数据的方法。这个插件使用起来非常简单,只需通过 npm 安装即可开始使用。

安装

可以通过 npm 安装 griddle-overhaul-subgrid-plugin, 在项目的根目录下打开终端并输入以下命令:

引用

在需要使用的 React 组件中引入 Griddle 和子网格插件:

子网格配置

要使用 Griddle-overhaul-subgrid-plugin,需要将其作为 Griddle 组件的插件引入并定义子网格配置的方法。下面是一个简单的示例:

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

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

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

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

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

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

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

说明

Griddle-overhaul-subgrid-plugin 通过 getRowMetadata 方法提供子网格的配置信息,以及渲染 Griddle 表格的组件。 在上面的示例中,getRowMetadata返回了一个包含子网格数据的 rowData,以及元数据列信息的 columnscomponents 对象定义用于渲染包含子网格的行的组件,Subgrid 组件渲染子网格表格。

在引入 Griddle-overhaul-subgrid-plugin 时,将子网格配置作为参数传递给它,Griddle 会使用该配置来呈现子网格行。

总结

使用 Griddle-overhaul-subgrid-plugin 扩展 Griddle 提供了一种优雅的方法来组织和查看数据集。插件的 API 简单,易于实现,可以很容易地与自己的 React 组件集成。 本文介绍了如何在 Griddle 中使用 Griddle-overhaul-subgrid-plugin 插件,并提供了简单的示例代码。 现在,你可以尝试在你的项目中使用 Griddle-overhaul-subgrid-plugin 来查看自己的子网格。

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

纠错
反馈