在行中具有组按钮的数据表中出现问题 - angular4

时间:2017-10-09 23:57:06

标签: javascript jquery angularjs datatables

我在我的datatables应用中使用angular4插件,我正在尝试添加dropdownmenu但是当我点击按钮时它没有显示

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错误,请帮助我了解如何使其正常运行。感谢。

1 个答案:

答案 0 :(得分:0)

我想出来并最终使其成功...只需在/* listening for changes up there */ System.out.println("I'll go get some coffee"); Thread.sleep(60000); // stopped changing, eh? /* do your stuff */ /* Continue listening for changes below */ 中添加data-toggle,但现在<button class="btn btn-default btn-sm dropdown-toggle txt-color-magenta" data-toggle="dropdown">函数无法在锚标记click中使用当我点击Action时,它会调用<li> <a (click)="editRow(row)" class="btn btn-success">Action</a> </li>函数,但它没有。 另外,当我选择一行时,我无法弄清楚如何调用函数说editRow