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; }
随机推荐
- MATLAB 统计元素出现的次数
可以使用 hist 函数: A = [1 2 8 8 1 8 2 1 8 2 1]; count = hist(A,unique(A)) count的结果与unique(A)对应.
- mac下安装xampp、及其之上的组件安装
由于mac下开发需要用到php7,这里是用的xampp集成开发版本.但是mac下安装xampp失败,失败信息如下: Error starting "XAMPP" stack: fa ...
- 【C++】解析C++运行环境的搭建
在本篇文章中,笔者会谈谈如何搭建C++的运行环境.在不同操作系统中,运行C++编译器的命令也各不相同,最常用的编译器是GNU编译器(Linux系统)和微软Visual Studio编译器(Window ...
- 【PHP】解析PHP中的函数
目录结构: contents structure [-] 可变参数的函数 变量函数 回调函数 自定义函数库 闭包(Closure)函数的使用 在这篇文章中,笔者将会讲解如何使用PHP中的函数,PHP是 ...
- springmvc(二) ssm框架整合的各种配置
ssm:springmvc.spring.mybatis这三个框架的整合,有耐心一步步走. --WH 一.SSM框架整合 1.1.整合思路 从底层整合起,也就是先整合mybatis与spring,然后 ...
- MYSQL 优化器 源码解析
http://www.unofficialmysqlguide.com/introduction.html https://dev.mysql.com/doc/refman/8.0/en/explai ...
- 无法加载协定为“ServiceReference1.xxxxxx”的终结点配置部分,因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。
原因是在web.config 文件中多次引用了“添加外部引用” <system.serviceModel> <bindings> <basicHttpBinding> ...
- CentOS 7下PXE+Kickstart无人值守安装操作系统
1.简介 1.1. 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支 ...
- 如何配置JVM系统属性及获取方式System.getProperty("pname")
https://www.cnblogs.com/keyi/p/7721893.html
- Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
使用 HTML5 的图片上传api的时候报如下错误: Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLIn ...