2017-10-09 17 views
0

我使用datatables插件在我angular4应用,我想补充dropdownmenu,但是当我点击按钮,它没有显示出来问题在一行组按钮数据表 - angular4

DataTable with Group button Menu ...

正如上文表明,如果我点击它没有显示任何下拉菜单中的任何行的编辑按钮,我也尝试添加一个按钮,并呼吁editRow()但它并没有调用该方法,在那里,当我点击编辑按钮,在外面它显示菜单datatable

这里是我如何在我的组件添加编辑按钮...

options = { 
    dom: "Bfrtip", 
    ajax: (data, callback, settings) => { 
     this.productService.getProducts().subscribe((data) => { 
     callback({ 
      aaData: data 
     }) 
     }) 
    }, 
    columns: [ 
     { data: "product" }, 
     { data: "dept" }, 
     { mRender : function(data, type, row) { 
      return '<div class="btn-group dropdown" dropdown>'+ 
      '<button class="btn btn-default btn-sm dropdown-toggle txt-color-magenta" dropdownToggle>'+ 
      '<i class="fa fa-gear fa-lg"></i>'+ 
      '<i class="fa fa-caret-down"></i>'+ 
      '</button>'+ 
      '<ul *dropdownMenu class="dropdown-menu">'+ 
      '<li> <a (click)="editRow("'+data+')">Action</a> </li>'+ 
      '<li><a (click)="callMeTwo()">Another action</a></li>'+ 
      '<li><a (click)="callMeThree()">Something else here</a></li>'+ 
      '<li class="divider"></li><li><a (click)="(null)">Separated link</a></li>'+ 
      '</ul>'+ 
      '</div>' 
     } 
     } 
    ], 
    buttons: ['copy', 'excel', 'pdf', 'print'] 
}; 

按照数据表论坛发现herehere如果我添加像下面...

options = { 
    dom: "Bfrtip", 
    ajax: (data, callback, settings) => { 
     this.productService.getProducts().subscribe((data) => { 
     callback({ 
      aaData: data 
     }) 
     }) 
    }, 
    columns: [ 
     { data: "product" }, 
     { data: "dept" }, 
     { defaultContent: '<ul class="demo-btns"> <li>' + 
     '<a (click)="callMeOne()" class="btn btn-success"><i class="fa fa-pencil-square-o"></i> </a>'+ 
     '</li>' }, 
    ], 
    buttons: ['copy', 'excel', 'pdf', 'print'] 
}; 

越来越Cannot read property 'nodeName' of null错误,请帮助我如何让它工作。谢谢。

回答

0

我想通了,并最终使工作......只是要在<button class="btn btn-default btn-sm dropdown-toggle txt-color-magenta" data-toggle="dropdown">添加data-toggle但现在click功能没有在锚标记<li> <a (click)="editRow(row)" class="btn btn-success">Action</a> </li>工作当我点击操作它想调用editRow功能,但它没”吨。 另外我无法弄清楚当我选择一行时如何调用函数RowSelected