在Angular 6.x 中使用ng2-smart-table中的ServerDataSource及添加特殊情况处理

上文链接从零开始在Angular 6中使用ng2-smart-table组件中的LocalDataSource

ng2-smart-table组件中，有两个input参数，一个是setting，一个是source，其中setting是用来配置表格的显示，比如

const _settings = {
      actions: {
        add: false,
        edit: false,
        delete: false
      },
      columns: {
        userId: {  title: 'USER_LIST'    },
        nickName: { title: 'NICK_NAME' },
        emergencyPhone: { title: 'EMERGENCY_NUMBER', filter: false },
        bloodType: { title: 'BLOOD_TYPE', filter: false }
      },
      pager: { perPage: 12 }
    };

cloumns中的id、url等需要与data的键相对应；
source顾名思义则是table的数据源，其中source分两种，一个是LocalDataSource，一个是ServerDataSource;

LocalDataSource：则是加载本地的数据源，也就是说，先从服务器取到数据，然后LocalDataSource加载就好。LocalDataSource就会根据数据的长度以及每页显示的页数，去显示表格，适用于数据不多的情况下，这样每次翻页都不需要请求数据。

ServerDataSource：则是加载服务器的数据源，将服务器的地址，请求的参数，以及服务器返回的数据格式，配置好，传给ServerDataSource。如：

//  如自己主动请求服务器，则url为‘HOST_URL + '/restful/userlist?pageNo=1&pageSize=20’
// 请求服务器的格式为
{
	url:'HOST_URL + '/restful/userlist?',
	*pageNo:number,
	*pageSize:number,
	userName:string
}
带*号为必带参数

// 服务器返回的数据格式为
{
	code:200,
	data:[{
		totalCount:1500,
		list:[....]   //  datalist
	}]
}
getTableSource() {
	const config = {
    	endPoint: HOST_URL + '/restful/userlist?',
    	pagerPageKey: 'pageNo', 
    	pagerLimitKey: 'pageSize',
    	dataKey: 'data.list',
    	totalKey: 'data.totalCount',
    	filterFieldKey: 'userName'   
    	// 该字段代表，在该列的表头有个搜索框，可以通过该搜索框进行搜索，如服务器不能通过该字段进行搜索，则将filter设为false
    };
    self.source = new NgoServerDataSource(this.http, config);
  }

ServerDataSource则通过传入config先向服务器请求数据，然后根据config的datakey、totalCount初始化表格。

**特殊情况一、**在表格的第一列添加一个索引，但是又没办法对数据源进行操作
解决办法，自己封装一个NgxServerData.source.ts,如下

import { ServerDataSource } from 'ng2-smart-table';
import { HttpParams } from '@angular/common/http';

export class NgoServerDataSource extends ServerDataSource {
  _handler: Function;
  constructor(protected http, config, handler?: Function) {
    super(http, config);
    if (handler) {
      this._handler = handler;
    }
  }

  extractDataFromResponse(res) {
    const _pagingInfo = this.getPaging();
    this._handler && this._handler(res['body'], _pagingInfo['page'], _pagingInfo['perPage']);
    try {
      return super.extractDataFromResponse(res);
    } catch (error) {
      return [];
    }
  }

未完待续…