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

翟鹏
2023-12-01

上文链接从零开始在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 [];
    }
  }

未完待续…

 类似资料: