智能表简介:
它是一个Angularjs模块,用于以表格格式显示,并具有一系列功能,例如过滤,排序等。这对于在报告准备,以Angular js更快地过滤和搜索数据的过程中非常有帮助。它是轻量级的,对开发人员友好的,健壮的,模块化的和可扩展的
方法:
- 我们可以通过以下方式开始使用智能表
- 凉亭安装角度智能表(或)
- npm安装angular-smart-table
- 一旦执行了以上脚本,就可以使用angular-smart-table进行设置了
句法:
- 将模块angular.module('
’,[‘smart-table’]添加 到angular应用程序中。 - 就像遵循普通的html表结构一样,在table元素上,需要添加“ st-table ”属性以向智能表通知将显示数据的集合(即,使用转发器)
- 为了在angular-smart-table中搜索内容,我们需要使用stSearch指令。它可以是需要搜索的搜索项目的逗号分隔列表
- 可以使用stDebounceTime属性(该值以毫秒为单位)以控制搜索时间。有时会进行无用的调用(特别是连接到服务器时),并且为了克服这个问题,需要使用此属性。
- 在搜索过程中,输入可以是正则表达式模式。有时,为了在输入中转义正则表达式中的特定字符,我们需要使用stSearchEscape属性。
基本示例和说明:
让我们看一下在智能表中搜索的示例代码,以及在下面的代码中看到的过滤和分页
从“ http://coderszine.com/demo/rest-api/v1/employee/read”中检索数据作为示例
stSafeSrc属性:
当我们从安全性端点(甚至从远程数据库,安全性端点,ajax调用等)获取数据时
我们需要不遗余力地使用此属性。此外,智能表会创建显示集合的副本,并且由于涉及异步数据,因此必须具有此属性。
在这里,“雇员”以异步方式获取并需要呈现,并在st-safe-src中指定
sort适用于所有列,因此给出了st-sort进行排序。
分页应用于每页5条记录。
输入 :
通过上述方法,让我们在具有搜索,排序和分页功能的智能表中呈现数据
SampleApp = angular.module(
'SampleApp', ['SampleApp.controllers', 'smart-table']);
angular.module('SampleApp.controllers', []).controller(
'sampleController',
['$scope', '$http', function($scope, $http)
{
$scope.loading = false;
$scope.getData = function() {
$scope.loading = true;
$http.get(
"http://coderszine.com/demo/rest-api/v1/employee/read")
.then(function(response){
$scope.employees = response.data;
$scope.loading = false;
});
}
$scope.getData();
}]);
HTML:
Angular Smart Table Example with
Pagination, Search and Sorting in
a simpler way
Loading the data...
Employee Name
Gender
Employee Age
Skills
Employee Designation
{{employee.name}}
{{employee.gender}}
{{employee.age}}
{{employee.skills}}
{{employee.designation}}
输出:
搜索文字后
根据名称排序