Angularjs2 公共基本列表组件

背景：Extjs使用久了就不想多写html了，最近使用angular4.2.4+ng-bootstrap1.0.0-alpha.25+bootstrap4.0.0-alpha.6+scss开发应用需要写html，封装成grid组件，通过ts设置即可加载显示数据，暂时未实现完，记录

效果：

1.grid.component.html

  <div class="col-md-12">
    <table [class]="'table table-bordered table-hover '+gconfig.cls" >
      <thead>
      <tr >
        <th *ngFor="let column of columns;let i = index"  [class]="'text-center ' + column.widthCls">{{column.header}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of records;let i = index" [class]="data.checked?'table-success':''"  (click)="rowClick(data)">
          <td *ngFor="let column of columns;let j = index" class="text-center">
            {{data[column.dataIndex]}}
          </td>
      </tr>
      </tbody>
    </table>

    <c-pagination [hidden]="!gconfig.ispage" [total]="pageConfig.total" [pageList]="pageConfig.pageList" [btnCls]="'btn-outline-info'" (onPageChanged)="onDataChanged($event)"></c-pagination>
  </div>

2.grid-model.ts

 

/**
 * 列类型
 */
export enum ColType {
  TEXT,BUTTON
}
/**
 * 列属性
 */
export class ColModel{
  header:string;
  width:string;
  widthCls:string;
  hidden:boolean;
  sortable:boolean;
  dataIndex:string;
  colType:ColType;

  getHeader() : string {
    return this.header;
  }
  getWidth() : string {
    return this.width;
  }
  getDataIndex() : string {
    return this.dataIndex;
  }
  getWidthCls() : string {
    return this.widthCls;
  }

  constructor(header:string,dataIndex:string, widthCls:string = 'c-w-1',colType:ColType=ColType.TEXT) {
      this.header = header;
      this.widthCls = widthCls;
      this.dataIndex = dataIndex;
  }
}
//分页的对象
export class PageConfig{
  //每页步长
  pageSize:number = 15;
  //总数
  total:number = 0;
  //可选每页数量
  pageList:Array<number> = [15, 25, 35];


}
export class GridConfig{
  //请求参数
  url:string;
  //请求参数
  params:any;
  //成功操作
  success:any;
  //失败操作
  failure:any;
  ispage:boolean = true;
  cls:string;
}

3.grid.component.ts

import {Component, Input,Output, ViewEncapsulation,ViewChild,OnInit,EventEmitter} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {HttpPaginationComponent} from '../pagination/http-pagination.component';
import {GridConfig,PageConfig,ColModel} from './grid-model';
import { HttpService } from '../http/http.service';


/**
 * 封装table组件
 * 实现自定义列，封装分页，查询等共鞥
 * @author wall
 * @date 2017-9-13
 * 数据返回示例
 * [{
 *    total:10,rows[{},{}...]
 * }]
 */
@Component({
    selector : 'c-wall-grid',
    templateUrl : './grid.component.html',
    encapsulation : ViewEncapsulation.None
})
export class GridComponent  implements OnInit {

  constructor(private http: HttpService) {

  }

  //列表配置
  @Input()
  gconfig:GridConfig = new GridConfig();
  //分页配置
  @Input()
  pageConfig:PageConfig = new PageConfig();
  //列配置
  @Input()
  columns: Array<ColModel>;
  //数据配置
  @Input()
  records:Array<any> = new Array();
  //行点击事件
  @Output()
  onRowClick = new EventEmitter();

  ngOnInit() {

  }


  //查询参数
  paramsObj:any = {
    params:{
      start:0
      ,limit:this.pageConfig.pageSize
    }
  };
  rowClick(obj:any){
    for(let i=0;i<this.records.length;i++){
      this.records[i].checked=false;
    }
    obj.checked=true;
    this.onRowClick.emit(obj);
  }


  //分页数据变化
  onDataChanged($event) {
    this.paramsObj.params.limit = $event.pageSize;
    this.paramsObj.params.start = ($event.pageNumber == 0 ? 1 : $event.pageNumber - 1) * $event.pageSize;
    if ($event.pageNumber != 0) {
      this.load(this.paramsObj,false);
    }
  }
  /**
   * 加载数据
   * {
   *  url:"",
   *  params:{},
   *  success:function(){},
   *  failure:function(){}
   * }
   * @param param
     */
  load(param:any,newSelect:boolean=true){
    //首次查询
    if(newSelect&&this.gconfig.ispage){
      if(!param.params){
        param.params = new Object();
      }
      param.params.start=0;
      param.params.limit = this.pageConfig.pageSize;
    }
    this.paramsObj = param;
    //演示数据
    this.records.splice(0,this.records.length);
    for(let i=param.params.start;i<(param.params.start+this.pageConfig.pageSize);i++){
      this.records.push({co01:'第一列第'+i+'行数据',co02:'第二列第'+i+'行数据',co03:'第3列第'+i+'行数据',co04:'第4列第'+i+'行数据',co05:'第5列第'+i+'行数据'})
    }
    this.pageConfig.total=10000;

   /* this.http.postFormData(param.url,
      param.params
      , function (successful, data, res) {
        this.records = data.rows;
        this.pageConfig.total=data.total;
        if (param.success) {
          param.success(successful, data, res);
        }
      }, function (successful, msg, err) {
        if (param.failure) {
          param.failure(successful, msg, err);
        }
      });*/
  }

}

4.调用示例：

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent } from '../shared/grid/grid.component';
import { ColModel,ColType,GridConfig } from '../shared/grid/grid-model';


@Component({
    selector: 'c-grid-demo',
    template: `
      <div class="c-content-inner">
        <div class="row">
        <c-wall-grid #cg [columns]="gridColumns" [gconfig]="gConfig" (onRowClick)="rowclick($event)"></c-wall-grid>
        </div>
      </div>
    `
})

export class GridDemoComponent implements OnInit {

  @ViewChild('cg', undefined) cg: GridComponent;

  constructor(){
  }

  ngOnInit() {
    //this.gConfig.cls = 'table-striped';
    //debugger;
    //加载数据
    this.cg.load({
      url:'http://xxxxx'
      ,params:{
        p01:''
      }
    });
  }
  //声明grid的配置
  gConfig:GridConfig = new GridConfig();
  rowclick($event){
    console.info($event)

  }
  //声明列信息绑定字段及样式
  gridColumns:Array<ColModel>=[
     new ColModel('姓名','co01','c-w-1')
    ,new ColModel('年龄','co02','c-w-1')
    ,new ColModel('出生日期','co03','c-w-1')
    ,new ColModel('籍贯','co04','c-w-1')
    ,new ColModel('操作','co05','c-w-1',ColType.BUTTON)
  ];


}