npm 包 eko-point-ng2-smart-table 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

eko-point-ng2-smart-table 是一个在 Angular 2+ 中使用的表格组件，可以用于显示和编辑数据。它具有丰富的功能，例如排序、过滤、行编辑、分页等。此外，它可以与后端 API 集成，支持服务器端分页和排序。

在本文中，我们将为您展示如何使用 eko-point-ng2-smart-table 。

安装

您可以使用 npm 安装 eko-point-ng2-smart-table ：

npm install --save eko-point-ng2-smart-table

基本用法

我们将通过一个简单的示例来展示如何在 Angular 2+ 应用程序中使用 eko-point-ng2-smart-table 。

引入模块

首先，您需要在 AppModule 中引入 eko-point-ng2-smart-table 模块：

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

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

创建组件

然后，您可以创建一个组件，并定义表的列和行。

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

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

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

显示表格

最后，您可以在 app.component.html 中显示表格：

<app-root></app-root>

这样，您就可以看到一个简单的表格了。

自定义列

您可以自定义列的标题和数据。例如，您可以使用以下方式自定义列标题和数据：

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

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

这里，我们定义了一个 “name” 列，并使用 valuePrepareFunction 自定义了它的数据。

使用过滤器

您可以为每一列定义过滤器，允许用户通过输入内容对表格进行过滤。例如，要为 age 列添加一个数字过滤器，您可以使用以下方式：

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

此外，您可以使用结果过滤器，以便在表格中添加更多高级过滤器。

分页

您可以在表格中启用分页功能。

settings = {
  pager: {
    display: true,
    perPage: 10
  },
  // ...
};

您可以通过更改 perPage 属性更改每页显示条目数。

服务器端分页和排序

如果您的数据量非常大，或者您希望在服务器端处理分页和排序，则可以使用源属性中的数据获取器函数。

例如，假设您的后端 API 有一个 /users 路径，其中包含所有用户的分页数据。您可以使用以下方式设置数据源：

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

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

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

在这个例子中，我们使用了 ServerDataSourceConf 类型，它有两个属性： sortField 和 sortDirection 。使用这些属性，您可以在服务器端进行排序。

结论

eko-point-ng2-smart-table 是一个非常强大的表格组件，是 Angular 2+ 开发的好帮手。它支持丰富的功能，可以用于显示和编辑数据。此外，它还可以与后端 API 集成，支持服务器端分页和排序。

在本文中，我们演示了如何使用 eko-point-ng2-smart-table ，并介绍了一些基本功能。我们希望这篇文章能够帮助您更好地理解此组件的工作原理，并帮助您在您的项目中成功使用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005590a81e8991b448d6728

npm 包 eko-point-ng2-smart-table 使用教程

简介

安装