angularjs ngTable组件

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",{field: "status",title: "status",{field: "duration",title: "duration",{field: "tag",title: "tag",{field: "description",title: "description",{field: "error",title: "error",{field: "stackTrace",title: "stackTrace",{field: "startTime",title: "startTime",{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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!