在Angular 2中的Jquery Datatable中绑定按钮事件 [英] Binding Button Events in Jquery Datatable in Angular 2
问题描述
我正在尝试在Angular 2应用程序中实现Jquery数据表
I am trying to Implement the Jquery Datatable in my Angular 2 Application
我可以按如下所示在html文件中呈现表格
I could Render the Table in my html file as follows
<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中,我将按照以下方式初始化表并在操作中添加两个按钮
In my component Oninit , I am Initialising my Table as following and adding two Buttons in the Action
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().
I am not able to Trigger these two events custcatSelected() and deleteCustCat().
我可以理解,这些事件不是由angular编译的,因为它是动态添加的.而且我不知道如何使这些事件起作用
I could understand that these events are not compiled by angular ,since its added dynamically . And i do not know how to make these events work
任何变通办法都会有所帮助,谢谢.
Any Work Around would be helpful Thanks.
推荐答案
我能想到的一种方法是通过jQuery监听事件,并使用元素上的data属性来处理事件.我尚未测试此代码,并且 显然,这不是一个干净的解决方案.只是给你一个主意.
One way I can think of is listening the event by jQuery and using the data attribute on the element to handle the event. I haven't tested this code, and apparently it is not a clean solution. Just to give you an idea.
您还需要在组件顶部添加declare var $:any
.因为TypeScript会对此抱怨.
You will need to add declare var $:any
at the top of your component as well. Because TypeScript will complaint about that.
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
}
这篇关于在Angular 2中的Jquery Datatable中绑定按钮事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!