npm 包 ng2-datatable-bootstrap4 使用教程

介绍

ng2-datatable-bootstrap4 是一个基于 Bootstrap 4 样式的 Angular 2+ 的数据表格库，使用简单方便，支持各种数据源，支持分页、排序、筛选等功能，具有较好的扩展性和性能优势。

安装

安装 ng2-datatable-bootstrap4 的方法非常简单，只需要在命令行中执行以下命令：

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

使用

使用 ng2-datatable-bootstrap4 的方法也非常简单，只需要按照以下步骤进行即可：

  1. 在 AppModule 中引入组件：
------ - -------- - ---- ----------------
------ - --------------------------- - ---- ---------------------------

-----------
  -------- -
    ---------------------------
  --
  ---
--
------ ----- --------- - -
  1. 在组件中使用：
------ - --------- - ---- ----------------

------------
  --------- -----------
  --------- -
    ------------------------
      -------------
      -------------------
      ----------------------
      -------------------
      -------------------
      ----------------
      ------------
      -----------------------
      -
    --------------------------
  -
--
------ ----- ------------ -
  ---- - -
    -- ---
  --
  ------- - -
    -- ---
  --
-
  1. 组件参数说明：
  • rows：类型为数组，表示需要展示的数据，必填参数。
  • columns：类型为数组，表示数据的列定义，必填参数。
  • columnMode：类型为字符串，表示列模式，默认为 'flex'，可选值为 'force'，表示强制固定列宽。
  • headerHeight：类型为数字，表示表头高度，默认为 50。
  • footerHeight：类型为数字，表示表尾高度，默认为 50。
  • rowHeight：类型为数字，表示行高度，默认为 50。
  • limit：类型为数字，表示每页展示的行数，默认为 10。
  • counts：类型为数组，表示每页展示的行数的可选值，默认为 [5, 10, 20, 50]。

示例代码

以下示例代码展示了如何使用 ng2-datatable-bootstrap4：

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

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

总结

ng2-datatable-bootstrap4 是一个基于 Bootstrap 4 样式的 Angular 2+ 的数据表格库，使用简单方便，支持各种数据源，支持分页、排序、筛选等功能，具有较好的扩展性和性能优势。本篇文章详细介绍了如何使用 ng2-datatable-bootstrap4，希望能够对你有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055a2e81e8991b448d7cfd

阅读全文

猜你喜欢

  • npm 包 dlbr 使用教程

    npm是JavaScript的包管理器，常常用来下载第三方的插件和库，以及发布自己的代码。dlbr是一个npm包，它可以帮助网站开发者将长字符串或文本分段，增强页面的可读性和可访问性。

    2 年前
  • npm 包 fix-it 使用教程

    在前端开发中，我们常常需要修改代码来修复不同的问题。这个过程通常是繁琐且容易出错的。但是，有一款名为 fix-it 的 npm 包，可以用来自动修复某些问题，从而帮助我们更快地完成前端开发。

    2 年前
  • npm 包 redux-fs-logger 使用教程

    前言 在前端开发中，我们通常会使用 Redux 进行状态管理，它提供了一种可预测的状态管理方式。Redux 本身并不具备日志记录功能，为了方便调试和排查问题，我们通常需要在 Redux 中引入日志记录...

    2 年前
  • npm 包 string-mangle 使用教程

    在前端开发过程中，字符串操作是必不可少的一部分。而 string-mangle 是一个非常实用的 npm 包，可以帮助我们对字符串进行各种操作，例如加密、解密、生成随机字符串等等。

    2 年前
  • npm 包 `reactive-data-unit` 使用教程

    reactive-data-unit 是一款轻量级的 JavaScript 库，它的目的是帮助前端开发者在开发过程中更加高效地管理数据源，并响应式地更新视图。本文将详细介绍这个 npm 包的使用方法。

    2 年前
  • npm 包 angular-column-filter 使用教程

    前言 在前端开发中，数据表格的使用非常常见。而对于大型数据表格，通常需要提供筛选、排序等功能，这些功能通常需要进行定制化开发，耗费时间和精力。但是，使用一些现成的 npm 包可以大大减少开发时间和负担...

    2 年前
  • npm 包 @savvy-css/text-utilities 使用教程

    前言 在前端开发中，我们经常需要对文字进行处理，比如变换大小写，截取字符串，添加前后缀等等。如果每次都手动写一遍代码，既费时又费力。那么有没有一种工具可以帮我们快速实现这些操作呢？答案是肯定的。

    2 年前
  • npm 包 @savvy-css/box-object-patterns 使用教程

    在前端开发中，对于不同的业务场景，我们经常需要对页面布局做出不同的响应式处理，而这些处理往往涉及到盒模型、布局、定位等多方面知识。这时候，@savvy-css/box-object-patterns ...

    2 年前
  • npm 包 react-native-simple-encryption 使用教程

    如果你正在开发一款 React Native 应用程序，并且需要对敏感数据进行加密和解密，那么你可能需要使用一个 React Native 的加密库。在这篇文章中，我们将介绍 react-native...

    2 年前
  • NPM 包 Redux-Bus 使用教程

    Redux-Bus 是一个基于 Redux 的事件总线工具，提供了订阅和发布事件的功能。它可以在前端和后端项目中使用，便于管理和维护应用程序的事件。本文将介绍如何安装、配置和使用 Redux-Bus。

    2 年前
  • npm 包 testgufuyan 使用教程

    testgufuyan 是一个基于 Node.js 开发的 npm 包，它可以帮助前端开发者快速测试字符串的谐音或拼音。这个包十分易用，本文会详细介绍如何安装和使用它。

    2 年前
  • npm 包 webpack-plugin-chunk-manifest 使用教程

    在前端项目开发过程中，我们经常会使用到打包工具来将多个源文件进行打包，常见的打包工具有 webpack、rollup 等。在这些工具中，webpack 是使用最广泛的一种打包工具，因而也有很多的插件可...

    2 年前
  • npm 包 eslint-plugin-es6 使用教程

    什么是 eslint-plugin-es6？ eslint-plugin-es6 是一个用于检查 JavaScript 代码是否符合 ECMAScript 6 标准的 ESLint 插件。

    2 年前
  • npm 包 jsgatt 使用教程

    jsgatt 是一个基于 JavaScript 客户端的通用属性接收器库。它提供一种简单的方式来设置对象的属性，以及针对这些属性定义的 Getter 和 Setter。

    2 年前
  • npm 包 react-native-iran-region-picker 使用教程

    在过去几年中，React Native 已成为前端开发的热门选择。一些优秀的 React Native 插件在 npm 上可用，react-native-iran-region-picker 是其中一...

    2 年前
  • npm 包 sql-include 的使用教程

    在前端开发中，访问数据库是常见的需求。而在 Node.js 中，npm 包是方便的资源管理工具，使得我们可以轻松地使用各种第三方库。其中，sql-include 包是一款处理 SQL 代码中 INCL...

    2 年前
  • npm 包 tipsy-sass 使用教程

    前言 前端开发中，我们经常需要使用一些 JavaScript 插件来实现特定的功能。然而，每次都手动引入这些插件文件是非常麻烦的，此时，我们就需要使用 npm 包来快速引入这些插件。

    2 年前
  • npm 包 typescript-zepto-components 使用教程

    简介 typescript-zepto-components 是一套基于 Zepto.js 的 TypeScript 组件库。它提供了常用的 UI 组件、表单验证、动画效果等功能，同时支持 AMD、C...

    2 年前
  • npm 包 mini-test.js 使用教程

    在前端开发中，我们经常会需要编写测试用例来确保自己编写的代码功能正确性和可用性。但是，手动编写测试用例是一件费时费力的工作，而且容易出错，特别是当测试用例数量较多时，这个工作就更加繁琐了。

    2 年前
  • npm 包 redux-transient 使用教程

    在开发前端应用时，管理应用状态是非常重要的。Redux 是一个非常流行和实用的状态管理库，它可以让我们管理应用的状态，以及在不同组件间共享数据。但是，当我们需要在应用中执行一些异步操作时，Redux ...

    2 年前

相关推荐

    暂无文章