ng2-smart-table

(文档地址)[akveo.github.io/ng2-smart-t…]

1. 支持前端数据本地分页

    import { LocalDataSource } from 'ng2-smart-table';
    import { Component } from '@angular/core';
    
    @Component({
        selector: 'ngx-table',
        styleUrls: [],
        template: `
            <ng2-smart-table 
               [settings]="settings"
               [source]="source"
            >
            </ng2-smart-table>
         `,
     })
    export class TableComponent {
        public settings = {
            mode: 'external',     //  是否支持选择row
            selectMode: 'single',
            noDataMessage: '暂无数据',
            actions: {
                columnTitle: '操作',
                position: 'right',
                add: false,
                edit: true,
            },
            hideSubHeader: true,
            hideHeader: false,
            edit: {
                editButtonContent: '<i class="nb-edit"></i>',
            },
            delete: {
                deleteButtonContent: '<i class="nb-trash"></i>',
            },
            pager: {
                display: true,
                perPage: 10,
            },
            columns: {
               // 列设置
            }
        }

        public source: LocalDataSource;

        constructor () {
            const data: Array<any> = [];
            this.source = new LocalDataSource(data);
            // or
            // this.source = new LocalDataSource();
            // this.source.load(data);
        }
    }

2. 支持后端服务分页

   2.1 默认支持的是get请求，且自己有一套对应的参数

      // 默认支持的是 get请求，仅需要将上面的 LocalDataSource 替换为 ServerDataSource;
      
      import { ServerDataSource } from 'ng2-smart-table';
      import { Component, OnInit } from '@angular/core';
      import { HttpClient } from '@angular/common/http';
      
       @Component({
           selector: 'ngx-table',
           styleUrls: [],
           template: `
               <ng2-smart-table 
                  [settings]="settings"
                  [source]="source"
               >
               </ng2-smart-table>
            `,
        })
        export class TableComponent implements OnInit {
            
            public settings = {
               mode: 'external',
               selectMode: 'single',
               noDataMessage: '暂无数据',
               actions: {
                   columnTitle: '操作',
                   position: 'right',
                   add: false,
                   edit: true,
               },
               hideSubHeader: true,
               hideHeader: false,
               edit: {
                   editButtonContent: '<i class="nb-edit"></i>',
               },
               delete: {
                   deleteButtonContent: '<i class="nb-trash"></i>',
               },
               pager: {
                   display: true,
                   perPage: 10,
               },
               columns: {
                  // 列设置
               }
            }
            
            
            public source: ServerDataSource;
            
            constructor (
               private http: HttpClient,
            ) {}
            
            ngOnInit(): void {
               this.source = new ServerDataSource(this.http, {
                  endPoint: '/api',
               })
            }
        }
      
   

   2.2 重头戏。修改默认 请求get 为 post，且添加 额外参数

       import { HttpClient, HttpResponse } from '@angular/common/http';
       import { ServerDataSource } from 'ng2-smart-table';
       import { Observable } from 'rxjs';
       import { Injectable } from '@angular/core';
   
       inteface RestfulResponse<T> {
           data?: T;
           code: number;
           msg: string;
           success: boolean;
       }
   
       interface PageResponse<T> {
          /**
           * @name 列表数据
           */
          records: T[];
          /**
           * @name 分页大小
           */
          size: number;
          /**
           * @name 总数量
           */
          total: number;
          /**
           * @name 当前页面
           */
          current: number;
          /**
           * @name 总页码
           */
          pages: number;
       }
   
       type HttpPageResponse<T> = RestfulResponse<PageResponse<T>>;
   
   
       // 其实就是重写 ServerDataSource
       @Injectable()
       export class PostServerDataSource extends ServerDataSource {
           protected conf: any;
   
           constructor (protected http: HttpClient, conf: any) {
               super(http, conf);
               this.conf = conf;
   
           }
           
           protected extractDataFromResponse(res: HttpResponse<HttpPageResponse<any>>): any[] {
               let data = [];
               if (res.status == 200 && res.body.code == 200) {
                 const records = res.body.data?.records;
                 if (Array.isArray(records)) {
                   data = records;
                 }
               }
               return data;
           }
           
           protected extractTotalFromResponse(res: HttpResponse<HttpPageResponse<any>>): number {
               let total: number = 0;
               if (res.status == 200 && res.body.code == 200) {
                 total = res.body.data.total;
               }
               return total
   
           }
           
           // 搜索表单 根据字段重新查询
           public async resetForm (searchForm: any) {
                this.conf = Object.assign(this.conf, searchForm);
                this.reset(true);
                // 无力吐槽 ng2-smart-table，必须要一个参数，又没用;
                this.load([]);
           }
           
           protected requestElements(): Observable<any> {
               const { endPoint, ...searchForm } = this.conf;
               const body: any = {
                 current: this.pagingConf.page,
                 size: this.pagingConf.perPage,
                 ...searchForm,
               }
               return this.http.post(endPoint, body, { observe: 'response' })
           }
           
       }
       
       
       
       // 以上算是改造完成 ServerDataSource， 使用 PostServerDataSource 替代 2.1 中的 ServerDataSource 即可
       
   
   

3. 自定义渲染cell 且 获得 cell 事件

      import { LocalDataSource, ViewCell } from 'ng2-smart-table';
      import { HttpClient } from '@angular/common/http';
      import { Component, OnInit } from '@angular/core';
      
      @Component({
           selector: 'ngx-table',
           styleUrls: [],
           template: `
               <ng2-smart-table 
                  [settings]="settings"
                  [source]="source"
               >
               </ng2-smart-table>
            `,
        })
       export class TableComponent implements OnInit {
           
       
            public settings = {
               mode: 'external',
               selectMode: 'single',
               noDataMessage: '暂无数据',
               actions: null,
               hideSubHeader: true,
               hideHeader: false,
               pager: {
                   display: true,
                   perPage: 10,
               },
               columns: {
                  id: {
                     type: 'custom',
                     renderComponent: TableRowComponent,
                     onComponentInitFunction: (instance) => {
                       instance.deleteRow.subscribe(id => {
                         this.deleteRow(id);
                       })
                     }
                   },
               }
            }
            
            // 这里是 改造过的
            public source: PostServerDataSource;
            
            constructor (
               private http: HttpClient
            ) {}
            
            private deleteRow (id: string) {
               console.log(id);
               
               // 刷新表单 
               this.source.refresh();
            }
            
            ngOnInit(): void {
                this.source = new PostServerDataSource(this.http, {
                   endPoint: '/api',
                   // 查询的除分页外的额外参数
                   // keywords: 'name',
                }
            }
       }
       
       
       @Component({
           selector: 'ngx-table-row',
           template: `
             <div>
                {{ value }}
                <button (click)="deleteItem()">删除</button>
             </div>
           `,
           styleUrls: [],
       })
       export class TableRowComponent implements ViewCell {
           @Input() value: string;
           @Input() rowData: any;
   
           @Output() deleteRow = new EventEmitter<string>();
           
           deleteItem () {
             this.deleteRow.emit(this.value);
           }
       }