介绍
ng-noob-table 是一个 AngularJS 的表格组件，可以用于快速创建表格展示数据并进行排序、筛选、分页等操作。它使用简单、轻量化、自适应性强，适合快速构建中小型数据列表展示页面。
安装
可以通过 npm 命令安装 ng-noob-table：
npm install ng-noob-table
或者直接下载 ng-noob-table 的 JS 和 CSS 文件，放置于项目中。
使用
1. 引入样式和 JS 文件
在 HTML 文件中引入 ng-noob-table 的样式和 JS 文件：
<link rel="stylesheet" href="path/to/ng-noob-table.min.css"> <script src="path/to/ng-noob-table.min.js"></script>
2. 创建数据源
在控制器中创建数据源并赋值到作用域中：
// controller
$scope.users = [
{ id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
{ id: 2, name: '李四', age: 27, email: 'lisi@example.com' },
{ id: 3, name: '王五', age: 30, email: 'wangwu@example.com' }
];3. 配置表格
在 HTML 文件中配置 ng-noob-table 的指令，并绑定数据源：
-- -------------------- ---- -------
------ ------------------ -------------
-------
----
-----------
-----------
-----------
-----------
-----
--------
-------
----
------ ------ -------
------ -------- -------
------ ------- -------
------ --------- -------
-----
--------
--------4. 初始化表格
在控制器中初始化表格：
// controller
angular.element(document).ready(function () {
var myTable = document.querySelector('#myTable');
var table = new ngNoobTable(myTable, { searchable: true });
});5. 使用 ng-noob-table
现在你可以在页面中展示出一个数据列表了，同时你还可以进行排序、筛选、分页等操作。ng-noob-table 提供了丰富的配置选项，可以根据需求自由定制表格的风格和功能。
配置选项
ng-noob-table 提供了多个配置选项，可以在初始化表格时传入。
1. 搜索框
是否显示搜索框。
{
searchable: true, // 是否启用搜索框
searchPlaceholder: 'Search...', // 搜索框的占位符
searchDelay: 300, // 搜索延迟毫秒数
caseSensitive: false // 是否大小写敏感
}2. 分页
是否分页显示。
-- -------------------- ---- ------- - ----------- ----- -- ------ --------- --- -- ------ ---------------- -- -- ------ ---------------- ------------- -- ------ ----------------- --------- -- ------- -------------------- ------------ -- -------- -------------------- ------------ -- -------- ------------- -------- ------ -- -- ------ -
3. 排序
是否启用排序。
{
sortable: true, // 是否启用排序
sortAscClass: 'sort-asc', // 升序样式类名
sortDescClass: 'sort-desc', // 降序样式类名
sortColumn: undefined, // 默认排序列
sortReversed: false, // 默认排序方式
onSortChange: function (column, reversed) {} // 排序回调函数
}示例
下面是一个完整的示例，展示了如何使用 ng-noob-table：
-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
----- ----------------
----------------------------
----- ---------------- ---------------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------
-------
----- -----------------------
---- ------------------
----------------- -------
------ ------------------ ------------ ------------ ---------------
-------
----
-----------
-----------
-----------
-----------
-----
--------
-------
----
------ ------ -------
------ -------- -------
------ ------- -------
------ --------- -------
-----
--------
--------
------
------- ---------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
- --- -- ----- ----- ---- --- ------ ---------------------- --
- --- -- ----- ----- ---- --- ------ ------------------ --
- --- -- ----- ----- ---- --- ------ -------------------- -
--
---------------------------------------- -- -
--- ------- - -----------------------------------
--- ----- - --- -------------------- -
----------- -----
----------- -----
------------- -----
---
---
---
---------
-------
-------结语
ng-noob-table 是一个简单实用的表格组件，可以帮助前端开发者快速构建数据列表展示页面。通过本文的介绍和示例，相信大家已经掌握了 ng-noob-table 的基本用法和配置选项，可以应对常见的表格需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bc781e8991b448d963f