angularjs ngTable组件

2019独角兽企业重金招聘Python工程师标准>>>

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>

 

转载于:https://my.oschina.net/u/2391658/blog/869116