ng-tasty 介绍

ng-tasty 是一个 AngularJS 的 npm 包，它提供了一组易于使用、强大的数据表格指令。在本文中，我们将介绍如何使用 ng-tasty 来构建数据表格，并对其进行定制。

安装

安装 ng-tasty 可以使用以下命令：

npm install ng-tasty --save

基本用法

模块引入

需要在文件中先引入 ngTasty 模块，例如：

import angular from 'angular';
import 'ng-tasty/ng-tasty.css'; // 引入样式
import ngTasty from 'ng-tasty';

angular.module('myApp', [ngTasty]);

HTML 模板

在 HTML 中使用 table 元素和 ng-tasty-table 指令即可创建数据表格。

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

在控制器中，需要为 tableState 和 rows 变量赋值。

angular.module('myApp').controller('myController', function($scope, $http) {
  $scope.tableState = {};
  $http.get('/api/data').then(function(response) {
    $scope.rows = response.data;
  });
});

排序和分页

在数据表格中，可以使用 tableState.sortBy 方法实现排序。为了分页，需要使用 ng-tasty-pagination 指令。

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

定制样式

通过添加 CSS 样式，可以轻松地对数据表格进行自定义。

.tasty-table tbody tr:hover {
  background-color: #f5f5f5;
}

总结

ng-tasty 提供了一组易于使用、强大的数据表格指令。我们可以使用它来构建数据表格，并对其进行定制。

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