В вышеупомянутой ссылке будет 2 компонента: подписчики и списки событий, а также файл helpers.ts. Мы предоставили все общие функции внутри файла helpers.ts. Проблема в том, что
1) Я в настоящее время нахожусь в компоненте списков подписчиков, и я хочу получить доступ к модулю регистрации событий. Поэтому я нажал на вкладку регистрации событий. И при выполнении опции поиска в datatable, регистрируемой по событию, api предыдущего компонента, который является списком подписчиков, также вызывается
https://plnkr.co/edit/5smOig0HXuCbd4US?open=lib%2Fapp.ts&deferRun=1&preview
, пожалуйста, используйте ссылка выше, чтобы получить полный код.
let user = JSON.parse(localStorage.getItem("currentUser"));
if (user.OptedPrimaryCountry == null) {
user.OptedPrimaryCountry = "";
}
let perpage = 20;
if (
user.Details.RecordsPerPage != undefined &&
user.Details.RecordsPerPage != null
) {
perpage = user.Details.RecordsPerPage;
}
return {
// datasource definition
data: {
type: "remote",
source: {
read: {
method: "GET",
url: "",
headers: {
Authorization: "Bearer " + user.access_token,
"pc-id": user.OptedPrimaryCountry
},
params: {
query: {
advanceSearch: {}
},
sort: {
}
}
}
},
pageSize: perpage,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
saveState: true,
},
// layout definition
layout: {
scroll: false,
footer: false
},
// column sorting
sortable: true,
// order: "desc",
pagination: true,
toolbar: {
// toolbar items
items: {
// pagination
pagination: {
// page size select
pageSizeSelect: [10, 20, 30, 50, 100]
}
}
},
query: {
advanceSearch: {}
},
sort: {
sort: "desc",
field: "RecordID"
},
search: {
input: $("#generalSearch")
},
// columns definition
columns: [
{
field: "RecordID",
title: "#",
sortable: "desc", // disable sort for this column
selector: false
},
{
field: "Actions",
width: 110,
title: "Actions",
sortable: false,
overflow: "visible",
textAlign: "right",
template: function(row, index, datatable) {
var dropup = datatable.getPageSize() - index <= 4 ? "dropup" : "";
if (row.IsDeleted == 0 || row.IsDeleted == undefined) {
return (
'\
<div class="dropdown ' +
dropup +
'">\
<a href="#" class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown">\
<i class="la la-ellipsis-h"></i>\
</a>\
<div class="dropdown-menu dropdown-menu-right">\
<a class="dropdown-item edit-button" data="' +
row.RecordID +
'" ><i class="la la-edit"></i> Edit Details</a>\
<a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\
<a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\
</div>\
</div>\
<a id="edit-button-' +
row.RecordID +
'" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill edit-button" data="' +
row.RecordID +
'" title="Edit details">\
<i class="la la-edit"></i>\
</a>\
<a class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill delete-button" data="' +
row.RecordID +
'" title="Delete">\
<i class="la la-trash"></i>\
</a>\
'
);
} else {
return (
'\
<div class="dropdown ' +
dropup +
'">\
<a href="#" class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown">\
<i class="la la-ellipsis-h"></i>\
</a>\
<div class="dropdown-menu dropdown-menu-right">\
<a isdeleted="' +
row.IsDeleted +
'" class="dropdown-item restore-button" data="' +
row.RecordID +
'" ><i class="la la-user-plus"></i> Restore</a>\
</div>\
</div>\
'
);
}
}
}
],
};