在Angular 2中的Jquery Datatable中绑定按钮事件

Posted 2023-05-07

【中文标题】在Angular 2中的Jquery Datatable中绑定按钮事件

【英文标题】：Binding Button Events in Jquery Datatable in Angular 2

【发布时间】：2017-11-05 23:43:38

【问题描述】：

我正在尝试在我的 Angular 2 应用程序中实现 Jquery 数据表

我可以在我的 html 文件中渲染表格，如下所示

<sa-datatable [options]="options" tableClass="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </sa-datatable>

在我的组件 Oninit 中，我正在初始化我的表，并在操作中添加两个按钮

ngOnInit() 
    this.options = 
        dom: "Bfrtip",
        ajax: (data, callback, settings) => 
            //My Service Call
        ,
        columns: [
             data: "result.id" ,
             data: "result.name" ,
            
                data: null, render: function (data, type, row) 
                return '<button id="myButton" class="btn btn-primary editbutton" data-toggle="modal" title="1" data-target="#mymodal" (click)="custcatSelected(' + data.result + ')">Edit</button> / <button #myButton1 class="btn btn-danger deletebutton" (click)=deleteCustCat(' + data.result.id + ')>Delete</button>';
                
            
        ],
        buttons: [
            'copy', 'excel', 'pdf', 'print', 'colvis'
        ]
    ;


public custcatSelected(customercat) 
    //Implemetation for Edit , where customercat is an object


public deleteCustCat(custcatId: string) 
    //Implementation for Deleting

我无法触发这两个事件 custcatSelected() 和 deleteCustCat()。

我可以理解这些事件不是由 Angular 编译的，因为它是动态添加的。而且我不知道如何让这些活动发挥作用

任何解决方法都会有所帮助，谢谢。

【参考方案1】：

我能想到的一种方法是通过 jQuery 监听事件并使用元素上的 data 属性来处理事件。我还没有测试过这段代码，并且 显然这不是一个干净的解决方案。只是给你一个想法。

您还需要在组件顶部添加declare var $:any。因为 TypeScript 会对此抱怨。

ngOnInit() 
    this.options = 
        dom: "Bfrtip",
        ajax: (data, callback, settings) => 
            //My Service Call
        ,
        columns: [
             data: "result.id" ,
             data: "result.name" ,
            
                data: null, render: function (data, type, row) 
                    return `
                        <button id="selectedBtn" class="btn btn-primary editbutton" data-toggle="modal" title="1"
                                data-target="#mymodal"
                                data-elemnt-obj="$data.result">Edit</button> 

                        <button class="btn btn-danger deletebutton"
                                data-element-id="$data.result.id">Delete</button>
                    `;
                
            
        ],
        buttons: [
            'copy', 'excel', 'pdf', 'print', 'colvis'
        ]
    ;

    $(document).on('click', '#selectedBtn', ($event) => 
        let customerCat = JSON.parse($($event).data('elemnt-obj'));
        this.custcatSelected(customerCat);
    );

    $(document).on('click', '.deletebutton', ($event) => 
        let customerId = $($event).data('element-id');
        this.deleteCustCat(customerId);
    );


public custcatSelected(customercat) 
    //Implemetation for Edit , where customercat is an object


public deleteCustCat(custcatId: string) 
    //Implementation for Deleting

【讨论】：

有帮助，谢谢 :)

您的意思是data-elemnt-obj="$JSON.stringify(data.result)" 吗？

哦，对了，如果它是一个对象，你必须对其进行字符串化。但我不建议再遵循这个解决方案了?只是一种解决方法