如何在Angular 2中将按钮添加到ng2-table的列中 [英] How to add buttons to columns to ng2-table in angular 2

问题描述

我想要一个表格，其中每一列都应有编辑按钮，而我使用的ng2却未能在其末尾放置按钮.

I want a table in which edit button should be there in every column and I used ng2 in which I failed to put buttons at the end.

我的html

<ng-table [config]="config.sorting"
      (tableChanged)="onChangeTable(config)"
      [rows]="rows" [columns]="columns" >
</ng-table>

我的ts，

rows: Array<any> = [];
columns: Array<any> = [
    {title: 'Name', name: 'accountname'},
    {title: 'Position', name: 'email', sort: false},
    {title: 'Office', name: 'phone', sort: 'asc'},
];

但是我想在每列上都有一个用于编辑和删除的按钮，我该怎么做，有人可以建议帮助吗.

But I want a button at each column for edit and delete and how can I do that,can someone please suggest help.

推荐答案

我们可以在Jquery的帮助下完成.

We can do with help of Jquery.

只需在公共列数组中添加一个名为Action的额外字段

Just add a extra field named Action in public column array

然后追加 一个新动作带有按钮的html字符串".

And then append a new action " String of html with buttons in it".

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',function(data:any){
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/deleteModule'}}]);
            }); 
    }

这是它的外观，重定向将正常工作.

This is how it looks and redirect will work fine.

这篇关于如何在Angular 2中将按钮添加到ng2-table的列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！