ngTable 是 AngularJS 表格指令,支持排序,过滤和分页,在编译步骤中自动生成带有标题和过滤器的标题行。个人感觉,是目前angularJS表格组件中功能比较丰富的。
组件截图
下载地址
JS:https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js
CSS:https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css
使用方法
现在angularjs的module中注入:ngTable 服务。
1、Select Filter演示:http://ng-table.com/#/filtering/demo-select
2、显示/隐藏列演示:http://ng-table.com/#/columns/demo-visibility
3、全局搜索:http://ng-table.com/#/filtering/demo-api
更多详细案例演示:http://ng-table.com/#/pagination/demo-pager-basic
基本配置
JS:
app.controller("SmokeCtrl",['$scope',function($scope){
var self = this;
self.tableParams = new NgTableParams(
{count:20}, //每页显示条数
{
counts: [20,50,100,150], //页码配置
paginationMaxBlocks: 10, //最大分页码显示
paginationMinBlocks: 2, //最小分页码显示
dataset: resdata.obj.tsTestCases.realContent //基本数据结构为:[{"aa":"bb","cc":"dd"}]
});
self.cols = [
{field: "id", title: "id", show: true },
{field: "name", title: "name", show: true },
{field: "status", title: "status", show: true },
{field: "duration", title: "duration", show: true },
{field: "tag", title: "tag", show: true },
{field: "description", title: "description", show: true },
{field: "error", title: "error", show: true },
{field: "stackTrace", title: "stackTrace", show: true },
{field: "startTime", title: "startTime", show: true },
{field: "endTime", title: "endTime", show: true }
];
$scope.$watch("globalFilter",function(oldVal,newVal){ //全局检索配置
if(oldVal == newVal)return;
$timeout(function(){
self.tableParams.filter({$: $scope.globalFilter});
},200);
});
}]);
HTML:
<div controller="SmokeCtrl as smoke">
<table ng-table="smoke.tableParams" ng-table-columns-binding="smoke.cols" class="table table-condensed table-striped table-hover" show-filter="true">
<tr ng-repeat="cs in $data">
<td ng-if="true" title="'id'" sortable="'id'">{{cs.id}}</td>
<td ng-if="true" title="'name'" filter="{name: 'text'}" sortable="'name'">
<span ng-show="cs.name.length<20">{{cs.name}}</span>
<span ng-show="cs.name.length>=20"><a toolTip="{{cs.name}}">{{cs.name.substring(0,20)}}...</a></span>
</td>
<td ng-if="true" title="'status'" filter="{status: 'select'}" filter-data="fltstatus" sortable="'status'">
<span class='label w-sm bg-{{cs.status=="SUCCESS"?"success":"danger"}}' style="display:-moz-inline-box; display:inline-block; width:65px;">{{cs.status}}</span>
</td>
<td ng-if="true" data-title="'duration'" filter="{duration: 'number'}" sortable="'duration'">{{cs.duration}}</td>
<td ng-if="true" data-title="'tag'" filter="{tag: 'text'}" sortable="'tag'">{{cs.tag}}</td>
<td ng-if="true" data-title="'description'" filter="{description: 'text'}" sortable="'description'">
<span ng-show="cs.description.length<20">{{cs.description}}</span>
<span ng-show="cs.description.length>=20"><a toolTip="{{cs.description}}" ng-click="openModule(cs.name,cs.description)">{{cs.description.substring(0,20)}}...</a></span>
</td>
<td ng-if="true" data-title="'error'" filter="{error: 'text'}" sortable="'error'">
<span ng-show="cs.error.length<20">{{cs.error}}</span>
<span ng-show="cs.error.length>=20"><a toolTip="{{cs.error}}">{{cs.error.substring(0,20)}}...</a></span>
</td>
<td ng-if="true" data-title="'stackTrace'" filter="{stackTrace: 'text'}" sortable="'stackTrace'">
<span ng-show="cs.stackTrace.length<10">{{cs.stackTrace}}</span>
<span ng-show="cs.stackTrace.length>=10"><a popover-placement='bottom' popover-trigger="mouseenter" popover="{{cs.stackTrace}}" ng-click="openModule(cs.name,cs.stackTrace)">{{cs.stackTrace.substring(0,10)}}...</a></span>
</td>
<td ng-if="true" data-title="'startTime'" filter="{startTime: 'text'}" sortable="'startTime'">{{cs.startTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td ng-if="true" data-title="'endTime'" filter="{endTime: 'text'}" sortable="'endTime'">{{cs.endTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
</tr>
</table>
</div>