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)  ];}