我想要一个表格,其中每列中都有编辑按钮,我使用了ng2,其中我没有把按钮放在最后.
我的HTML,
<ng-table [config]="config.sorting"
(tableChanged)="onChangeTable(config)"
[rows]="rows" [columns]="columns" >
</ng-table>
我的
rows: Array<any> = [];
columns: Array<any> = [
{title: 'Name',name: 'accountname'},{title: 'Position',name: 'email',sort: false},{title: 'Office',name: 'phone',sort: 'asc'},];
但我希望每列都有一个按钮用于编辑和删除,我该怎么做呢,有人可以建议帮助.
我们可以在Jquery的帮助下完成.
原文链接：https://www.f2er.com/angularjs/141055.html只需在公共列数组中添加一个名为Action的额外字段
然后追加
一个新动作“带有按钮的html字符串”.
constructor(private moduleviewservice:ModuleViewService,private _router:Router){
this.moduleviewservice.getModule().subscribe(
data=>{
this.model=data;
this.data=data;
for(let i=0;i<data.length;i++){
this.data[+i]["action"]="<a> <span class=\"viewEmployee\" data-id="+data[+i].moduleId+"> <i class=\"fa fa-file-text\" ></i> </span> </a> <a > <span class=\"editEmployee\" data-id="+data[+i].moduleId+"> <i class=\"fa fa-pencil\" ></i> </span> </a> <a > <span class=\"deleteEmployee\" data-id="+data[+i].moduleId+"> <i class=\"fa fa-trash-o\" ></i> </span> </a>";
}
this.length = this.data.length;
this.data=data;
console.log(this.data);
this.onChangeTable(this.config);
});
}
/*NG@ TABLE */
public columns:Array<any> = [
{title: 'Module Name',name: 'moduleName'},{title: 'Module Description',name: 'moduleDesc',},{title: 'Action',name:'action',sort:false},];
/*IN NG ON INIT I have used this to call in (jquery)*/
ngOnInit(){
let route=this._router;
let moduleviewservice=this.moduleviewservice;
$(document).on('click','.viewEmployee',function(data:any){
let j=$(this).attr('data-id');
moduleviewservice.putSingleId(j);
route.navigate( ['/home',{outlets: {'menu': 'home/singleViewModule'}}]);
});
$(document).on('click','.editEmployee',function(data:any){
let j=$(this).attr('data-id');
moduleviewservice.putSingleId(j);
route.navigate( ['/home',{outlets: {'menu': 'home/editModule'}}]);
});
$(document).on('click','.deleteEmployee',{outlets: {'menu': 'home/deleteModule'}}]);
});
}
这是它的外观和重定向将正常工作.
