【转】https://github.com/valor-software/ng2-table  demo:http://valor-software.com/ng2-table/

ng2-table

一.API

Installation

  1. 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 loading
  • itemsPerPage (number) - number of the displaying items (rows) on a page
  • maxSize (number) - number of the displaying pages before ...
  • numPages (number) - total number of the pages
  • length (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 plugin
    • sorting (?any) - switch on the sorting plugin
      • columns (Array<any>) - only list of the columns for sorting
    • filtering (?any) - switch on the filtering plugin
      • filterString (string) - the default value for filter
      • columnName (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 displayed

  • columns (?Array<any>) - config for columns (+ sorting settings if it's needed)
    • title (string) - the title of column header
    • name (string) - the property name in data
    • sort (?string|boolean) - config for columns (+ sorting settings if it's needed), sorting is switched on by default for each column
    • className (string|Array<string>) - additional CSS classes that should be added to a column header
    • filtering (?any) - switch on the filtering plugin
      • filterString (string) - the default value for filter
      • columnName (string) - the property name in raw data

Outputs (Events)

  • tableChanged: data change event handler
  • cellClicked: 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的更多相关文章

  1. 关于table的一些记录

    HTML有10个表格相关标签 <caption> 表格的大标题,该标记可以出现在<table> 之间的任意位置.它对于搜索引擎的机器人记录信息十分重要.参数有align.val ...

  2. ng1和ng2的部分对比----angular2系列(四)

    前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...

  3. 散列表(hash table)——算法导论(13)

    1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...

  4. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  5. 创建几个常用table展示方式插件

    这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为(table-shenniu),样式使用的是bootstrap.min.css,还需要引用jquery.min.js包,这个插件 ...

  6. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

  7. 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出同一表中的某些值 ...

  8. 打印Lua的Table对象

    小伙伴们再也不用为打印lua的Table对象而苦恼了, 本人曾也苦恼过,哈哈 不过今天刚完成了这个东西, 以前在网上搜过打印table的脚本,但是都感觉很不理想,于是,自己造轮子了~ 打印的效果,自己 ...

  9. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  10. css设置table表格tr分离

    table { border-collapse:separate; border-spacing:10px 50px; }

随机推荐

  1. Centos-7.x 下子网掩码的配置

    [背景] 今天在自己的虚拟机上安装上了centos-7.6操作系统,应该是安装的过程中大意了:安装完成后虚拟机可以正常访问外网但是 我的笔记本连接不上虚拟机. 笔记本的IP地址:172.16.192. ...

  2. CDC在sql server 2017中无法使用的问题

    Symptom === sp_MScdc_capture_job in the CDC job raised error message Msg 217, Level 16, State 1, Pro ...

  3. json、数组、html标签的修改删除

    存数组 var aa=[1,2,3]; var sStorage=window.sessionStorage; sStorage.aa=aa; console.log(sStorage.aa); // ...

  4. VBA二次学习笔记(1)——文件操作

    说明(2018-9-1 11:20:46): 1. 上班三个月了,累的一逼,真的是钱少事多离家远,每天早上六点起,晚上八点回.哎,少壮不努力啊! 2. 三个月没写博客了,上一篇已经是5.29的了,真的 ...

  5. c++线程池小例子

    ThreadPool.h #ifndef __THREADPOOL_H #define __THREADPOOL_H #define HAVE_STRUCT_TIMESPEC //#include & ...

  6. geoserver 图层样式

    1.Styled Layer Descriptor 标准描述了稳当的结构合使用规则.一个文档包含了符号定义和绘制规则,那么这个文档就叫做Styled Layer Desciptor(SLD)样式,它是 ...

  7. ansible运维工具(一)

    运维工具介绍 OS Provisioning: PXE, Cobbler(repository, distritution,profile) PXE: dhcp, tftp, (http, ftp) ...

  8. [Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instanc

    今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is ignored on component <div> b ...

  9. Vivado Design Suite用户指南之约束的使用第二部分(约束方法论)

    Constraints Methodology(约束方法论) 关于约束方法论 设计约束定义了编译流程必须满足的要求,以使设计在板上起作用. 并非所有步骤都使用所有约束在编译流程中. 例如,物理约束仅在 ...

  10. win10下VS2017配置GSL库

    GSL库:GNU Scientific Library 1.  下载:下载Complete package, except sources和Sources两个exe文件 2.  安装:将两个exe安装 ...