简介
ng-table2 是一个 AngularJS 实现的表格插件，是对原本的 ng-table 进行优化和封装的产品。它提供了易于使用的 API，可以方便地对表格进行自定义，使用户能够在短时间内快速地开发和实现表格功能。
安装
ng-table2 可以使用 npm 进行安装，输入以下命令即可安装:
$ npm install ng-table2 --save
使用
引入样式
ng-table2 提供了默认的样式文件，在头部引入即可：
<link rel="stylesheet" href="node_modules/ng-table2@2.x.x/dist/ng-table.min.css">
引入依赖
在依赖中添加 ngTable 依赖：
angular.module('myApp', ['ngTable']);创建数据
ng-table2 的数据必须是数组格式。以下是一个例子：
-- -------------------- ---- -------
----------- - -
-
----- ----- -----
---- ---
------ ---------------------
------ ---------------
-------- ---- ---- -----
----- ----------
------ -----
-------- -------
--
-- --------
--创建表格
使用 ngTableParams 对象创建表格。
-- -------------------- ---- -------
------------------------------------------------------- ---------------- -------------- -
--- -- - -----
-------------- - --- ---------------
----- -- -- ---
------ -- -- -------
-- -
------ --------------- -- -------
-------- ---------------- -
--- ----------- - ---------------- - --------------------------- ----------------- - --------
------ -------------------------------- - -- - --------------- ------------- - ----------------
-
---
---指南
表格分页
通过在 ngTableParams 对象中设置 page 和 count 属性，可以启用表格的分页功能：
vm.tableParams = new ngTableParams({
page: 1, // 默认第一页
count: 10 // 每一页的数据量
}, /* ... */);表格排序
表格可以通过设置 sort 和 filter 属性实现排序。
设置 sort 属性：
ng-click="tableParams.sorting('name', 'asc')"设置 filter 属性：
<input type="text" ng-model="params.filter().name" placeholder="Name">
自定义表格
ng-table2 创建表格的过程中，您可以使用自定义的模板和指令来完成表格的设计。例如，以下代码将在表格中添加两个自定义列。
-- -------------------- ---- -------
------ ------------------------- --------------
----
--- ------------------- ------------------------------------- -----------------
--- ------------------ ------------------------------------ ----------------
--- ---------------------------- -----------
-----
--- --------------- -- -------
--- ------------------- -------------------- --------- -------
--- ------------------ ------------------- -------- -------
--- ------------------- ----------- ---------- -------
-----
--------示例
基本表格
-- -------------------- ---- -------
------ ------------------------- ------------ -------------- ----------- ---------------
--- --------------- -- -------
--- ------------------- -------------------- --------- -------
--- ------------------ ------------------- -------- -------
--- -------------------- --------------------- ---------- -------
--- -------------------- --------------------- ---------- -------
--- ---------------------- ----------------------- ------------ -------
--- ------------------- -------------------- --------- -------
--- -------------------- --------------------- ---------- -------
--- ---------------- ------ ----------------------- ------------ -------
-----
--------自定义表格
-- -------------------- ---- ------- ------ ------------------------- ------------ -------------- ----------- --------------- ----- ----- --------------------- ----- ------------------- --------------------------- ----- ------------------ ------------------------- ----- -------------------- ----------------------------- ----- -------------------- ----------------------------- ----- ---------------------- --------------------------------- ----- ------------------- --------------------------- ----- -------------------- ----------------------------- ----- ---------------- ------ ------------------------ --------- ------ ---- --------------- -- ------- ------------ --------------- ----------------------------------------- -------- --------- ------- -------- -------- ------- -------- ---------- ------- -------- ---------- ------- -------- ------------ ------- -------- --------- ------- -------- ---------- ------- -------- ------------ ------- ------ --------
结论
ng-table2 是一个非常不错的 AngularJS 表格插件，它拥有许多个性化的功能和便捷的API接口。在前端开发中使用 ng-table2，可以大大减少我们的开发工作量，提高效率，让我们快速地创建出精美美观的数据表格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad681e8991b448d873f