如何在角2中向ng2-table添加按钮

发布时间：2020-12-17 08:51:09 所属栏目：安全来源：网络整理

导读：我想要一个表格,其中每列中都有编辑按钮,我使用了ng2,其中我没有把按钮放在最后. 我的HTML, ng-table [config]="config.sorting" (tableChanged)="onChangeTable(config)" [rows]="rows" [columns]="columns" /ng-table 我的 rows: Arrayany = [];columns: A

我想要一个表格,其中每列中都有编辑按钮,我使用了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的帮助下完成.

只需在公共列数组中添加一个名为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'}}]);
            }); 
    }

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!