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

}