ng2-table
【转】https://github.com/valor-software/ng2-table demo:http://valor-software.com/ng2-table/
ng2-table
一.API
Installation
- A recommended way to install ng2-table is through npm package manager using the following command:
npm i ng2-table --save
Usage
import { Ng2TableModule } from 'ng2-table/ng2-table';
or if you want to import specified plugins (Table component is required, the others are optional):
import { NgTableComponent, NgTableFilteringDirective, NgTablePagingDirective, NgTableSortingDirective } from 'ng2-table/ng2-table';
in this case, don't forget to include all of the imported entities to your module
Utilisation
There are only simple table with 3 plugins/directives: filtering
, paging
, sorting
. You don't need special config
variable for storing settings for all plugins as is used in demo example. It's just showing usage sample.
Inputs (Properties)
page
(number
) - the default page after the table component loadingitemsPerPage
(number
) - number of the displaying items (rows) on a pagemaxSize
(number
) - number of the displaying pages before...
numPages
(number
) - total number of the pageslength
(number
) - total number of the items after filtering (of it's chosen)config
(?any
) - config for setup all plugins (filtering, sorting, paging):paging
(?boolean
) - - switch on the paging pluginsorting
(?any
) - switch on the sorting plugincolumns
(Array<any>
) - only list of the columns for sorting
filtering
(?any
) - switch on the filtering pluginfilterString
(string
) - the default value for filtercolumnName
(string
) - the property name in raw data
className
(string|Array<string>
) - additional CSS classes that should be added to a
rows
(?Array<any>
) - only list of the rows which should be displayedcolumns
(?Array<any>
) - config for columns (+ sorting settings if it's needed)title
(string
) - the title of column headername
(string
) - the property name in datasort
(?string|boolean
) - config for columns (+ sorting settings if it's needed), sorting is switched on by default for each columnclassName
(string|Array<string>
) - additional CSS classes that should be added to a column headerfiltering
(?any
) - switch on the filtering pluginfilterString
(string
) - the default value for filtercolumnName
(string
) - the property name in raw data
Outputs (Events)
tableChanged
: data change event handlercellClicked
: onclick event handler
Filter
The responsibility of the filtering issue falls on user. You should choose on which columns the filter would be applied. You could add any number of different filters. Filter string - it's a string for matching values in raw data. Column name refers to the property name in raw data. The rest logic you could organize by yourself (the order of filters, data formats, etc). Even you could use filter for list of data columns.
You can also set up filtering
param for columns, in this case filter box will appear in first row of the table.
Sorting
Data sorting could be in 3 modes: asc, desc and without sorting data (as it comes from backend or somewhere else). If you want to switch off the sorting for some of the columns then you should set it forcibly in columns config (set property sort to false value for each column you want)
Paging
Pagination could be used from ng2-bootstrap - pagination component. When the page is changed, the pagination component will emit event tableChanged
with an object {page, itemsPerPage}. Then you can easily subscribe on it and request corresponding raw data.
二.html
<div class="row">
<div class="col-md-4">
<input *ngIf="config.filtering" placeholder="Filter all columns"
[ngTableFiltering]="config.filtering"
class="form-control"
(tableChanged)="onChangeTable(config)"/>
</div>
</div>
<br>
<ng-table [config]="config"
(tableChanged)="onChangeTable(config)"
(cellClicked)="onCellClick($event)"
[rows]="rows" [columns]="columns">
</ng-table>
<pagination *ngIf="config.paging"
class="pagination-sm"
[(ngModel)]="page"
[totalItems]="length"
[itemsPerPage]="itemsPerPage"
[maxSize]="maxSize"
[boundaryLinks]="true"
[rotate]="false"
(pageChanged)="onChangeTable(config, $event)"
(numPages)="numPages = $event">
</pagination>
<pre *ngIf="config.paging" class="card card-block card-header">Page: {{page}} / {{numPages}}</pre>
三.typescript
import { Component, OnInit } from '@angular/core';
import { TableData } from './table-data'; // webpack html imports
let template = require('./table-demo.html'); @Component({
selector: 'table-demo',
template
})
export class TableDemoComponent implements OnInit {
public rows:Array<any> = [];
public columns:Array<any> = [
{title: 'Name', name: 'name', filtering: {filterString: '', placeholder: 'Filter by name'}},
{
title: 'Position',
name: 'position',
sort: false,
filtering: {filterString: '', placeholder: 'Filter by position'}
},
{title: 'Office', className: ['office-header', 'text-success'], name: 'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: '', filtering: {filterString: '', placeholder: 'Filter by extn.'}},
{title: 'Start date', className: 'text-warning', name: 'startDate'},
{title: 'Salary ($)', name: 'salary'}
];
public page:number = 1;
public itemsPerPage:number = 10;
public maxSize:number = 5;
public numPages:number = 1;
public length:number = 0; public config:any = {
paging: true,
sorting: {columns: this.columns},
filtering: {filterString: ''},
className: ['table-striped', 'table-bordered']
}; private data:Array<any> = TableData; public constructor() {
this.length = this.data.length;
} public ngOnInit():void {
this.onChangeTable(this.config);
} public changePage(page:any, data:Array<any> = this.data):Array<any> {
let start = (page.page - 1) * page.itemsPerPage;
let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
return data.slice(start, end);
} public changeSort(data:any, config:any):any {
if (!config.sorting) {
return data;
} let columns = this.config.sorting.columns || [];
let columnName:string = void 0;
let sort:string = void 0; for (let i = 0; i < columns.length; i++) {
if (columns[i].sort !== '' && columns[i].sort !== false) {
columnName = columns[i].name;
sort = columns[i].sort;
}
} if (!columnName) {
return data;
} // simple sorting
return data.sort((previous:any, current:any) => {
if (previous[columnName] > current[columnName]) {
return sort === 'desc' ? -1 : 1;
} else if (previous[columnName] < current[columnName]) {
return sort === 'asc' ? -1 : 1;
}
return 0;
});
} public changeFilter(data:any, config:any):any {
let filteredData:Array<any> = data;
this.columns.forEach((column:any) => {
if (column.filtering) {
filteredData = filteredData.filter((item:any) => {
return item[column.name].match(column.filtering.filterString);
});
}
}); if (!config.filtering) {
return filteredData;
} if (config.filtering.columnName) {
return filteredData.filter((item:any) =>
item[config.filtering.columnName].match(this.config.filtering.filterString));
} let tempArray:Array<any> = [];
filteredData.forEach((item:any) => {
let flag = false;
this.columns.forEach((column:any) => {
if (item[column.name].toString().match(this.config.filtering.filterString)) {
flag = true;
}
});
if (flag) {
tempArray.push(item);
}
});
filteredData = tempArray; return filteredData;
} public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
if (config.filtering) {
Object.assign(this.config.filtering, config.filtering);
} if (config.sorting) {
Object.assign(this.config.sorting, config.sorting);
} let filteredData = this.changeFilter(this.data, this.config);
let sortedData = this.changeSort(filteredData, this.config);
this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
this.length = sortedData.length;
} public onCellClick(data: any): any {
console.log(data);
}
}
ng2-table的更多相关文章
- 关于table的一些记录
HTML有10个表格相关标签 <caption> 表格的大标题,该标记可以出现在<table> 之间的任意位置.它对于搜索引擎的机器人记录信息十分重要.参数有align.val ...
- ng1和ng2的部分对比----angular2系列(四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
- 散列表(hash table)——算法导论(13)
1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...
- React使用antd Table生成层级多选组件
一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
- 创建几个常用table展示方式插件
这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为(table-shenniu),样式使用的是bootstrap.min.css,还需要引用jquery.min.js包,这个插件 ...
- html中table边框属性
1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...
- MySQL中You can't specify target table for update in FROM clause一场
mysql中You can't specify target table <tbl> for update in FROM clause错误的意思是说,不能先select出同一表中的某些值 ...
- 打印Lua的Table对象
小伙伴们再也不用为打印lua的Table对象而苦恼了, 本人曾也苦恼过,哈哈 不过今天刚完成了这个东西, 以前在网上搜过打印table的脚本,但是都感觉很不理想,于是,自己造轮子了~ 打印的效果,自己 ...
- React中使用Ant Table组件
一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...
- css设置table表格tr分离
table { border-collapse:separate; border-spacing:10px 50px; }
随机推荐
- linux内核剖析(十)进程间通信之-信号量semaphore
信号量 什么是信号量 信号量的使用主要是用来保护共享资源,使得资源在一个时刻只有一个进程(线程)所拥有. 信号量的值为正的时候,说明它空闲.所测试的线程可以锁定而使用它.若为0,说明它被占用,测试的线 ...
- easyui中combobox 取值
<input id="cmbstrTrainType" class="easyui-combobox" name="cmbstrTrainTyp ...
- HLS playlist典型示例
[时间:2018-06] [状态:Open] [关键词:流媒体,HLS,m3u8,playlist,variant, alternate] 0 引言 本文主要是对apple官网上的echnical N ...
- C# Task中的Func, Action, Async与Await的使用
在说Asnc和Await之前,先说明一下Func和Action委托, Task任务的基础的用法 1. Func Func是一种委托,这是在3.5里面新增的,2.0里面我们使用委托是用Delegate, ...
- spring gateway 截取response 长度缺失
网上找到一段获取修改response的代码:https://blog.csdn.net/tianyaleixiaowu/article/details/83618037 代码如下: import or ...
- hdoj:2081
手机短号 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- list add对象踩的坑
list 添加对象时,没有把new object写到循环体里,导致最后添加了相同的一个对象: public List<goods> find(String goodsname) { Lis ...
- 24小时学通Linux内核之电源开和关时都发生了什么
说实话感觉自己快写不下去了,其一是有些勉强跟不上来,其二是感觉自己越写越差,刚开始可能是新鲜感以及很多读者的鼓励,现在就是想快点完成自己制定的任务,不过总有几个读者给自己鼓励,很欣慰的事情,不多感慨了 ...
- jedis中scan的实现
我的版本说明: redis服务端版本:redis_version:2.8.19 jedis: <dependency> <groupId>redis.clients</g ...
- pom.xml文件最详细的讲解
1 引入额外的jar包 <dependency> <groupId>bitwalker</groupId> <artifactId>UserAgentU ...