Question

我想要一个表格，其中每列都有编辑按钮，我使用的是ng2，其中我没有把按钮放在最后。

我的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'},
];

但我想在每一栏都有一个按钮进行编辑和删除，我该怎么做呢，有人可以提供帮助吗。

Answer 1

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

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

然后追加新动作＆＃34;带有按钮的html字符串＆＃34;。

＆＃13;

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

＆＃13;

＆＃13; 这是它的外观和重定向将正常工作。

Answer 2

只需将按钮包含在行[]：

中即可添加按钮

rows = [{
  id: '1',
  title: 'title test1 <button type="button" class="btn btn-primary">Test Button in ng2-table</button>'
}, {
  id: '2',
  title: 'title test2'
}, {
  id: '3',
  title: 'title test3'
}]

按钮将出现在第一行的第二列中。 Here's a working demo:

事实上，不仅仅是按钮，您可以在表格中的任何位置包含任何组件（前提是它与角度兼容！）

Answer 3

我也有同样的问题，最后我找到了解决方案。 PRIMENG是用于角度2的最佳数据表

它具有所有功能，包括分页，搜索，过滤，排序，我们可以在每一行中添加自定义操作。请用这个。

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

3 个答案: