Я разрабатываю скрипт n-уровня вложенных таблиц с помощью div.
Таким образом, существует 5-6 столбцов с n
количеством строк, каждый первый столбец должен развернуть/свернуть кнопку, по щелчку которой я делаю вызов API, который дает мне данные, соответствующие выбранным фильтрам строк.
Раньше, когда я работал с основным JavaScript и jQuery, я использовал метод find
для селектора документов, чтобы идентифицировать родителя кнопки expand/collapse и нажимать динамически созданный HTML после этого конкретного div только с помощью метода innerHTML
или append
jQuery
Я немного новичок в угловых и не очень много работал. Пожалуйста, помогите мне решить эту проблему.
splitOpt
- это массив объектов, на основе которых я разделяю данные отчета.
this.splitOpt = [
{
id: "country",
label: "Country"
},
{
id:"os".
label:"Operating System"
},
{
id:"osv".
label:"Operating System Version"
}
]
Функция получения отчетов
getReport() {
// apiFilters are array of object having some values to filter report data
var apiFilters: any = [{}];
for (var i = 0; i < this.sFilters.length; i++) {
if (this.sFilters[i][0].values.length > 0) {
var k;
k = this.sFilters[i][0].id
apiFilters[0][k] = this.sFilters[i][0].values;
}
}
var split = this.splitOpt[0].id;
this._apis.getReportData(split, apiFilters[0]).subscribe(response => {
if (response.status == 1200) {
this.reportData = response.data.split_by_data;
}
})
}
Функция, чтобы проверить, есть ли больше расколов или нет
checkIfHaveMoreSplits(c){
if(this.splitOpt.length > 0) {
var index = this.splitOpt.findIndex(function(v) {
return v.id == c
})
if (typeof(this.splitOpt[index+1]) != "undefined"){
return this.splitOpt[index+1];
} else {
return 0;
}
}
}
Код для рисования таблицы на основе данных разделения и отчета.
Пусть предположить, что существует только один объект для страны в splitopt
объекта, чем checkIfHaveMoreSplits()
возвращает 0
, который означает, что я не должен дать кнопку расширения и если это не 0
, расширяющую кнопка появится там.
Onclick кнопки расширения Я splitopt
следующий элемент из splitopt
и вызовет API, чтобы получить отчет с разделенным параметром в качестве носителя и так далее.
<div class="table" >
<div class="row" *ngFor="let rData of reportData; let i = index;" >
<div class="col" >
<button
class="btn btn-sm"
*ngIf="checkIfHaveMoreSplits(splitbykey) !== 0"
(click)="splitData(splitbykey)"
>+</button>
{{rData[splitbykey]}}
</div>
<div class="col">{{rData.wins}}</div>
<div class="col">{{rData.conversions}}</div>
<div class="col">{{rData.cost}}</div>
<div class="col">{{rData.bids}}</div>
<div class="col">{{rData.impressions}}</div>
<div class="col">{{rData.rev_payout}}</div>
</div>
Я управляю одним массивом, который определяет, насколько я могу расширить элемент свернуть
Предположим, что массив имеет три элемента: страну, перевозчик и os
Итак, первая таблица, которую я нарисую, имея все страны в таблице с кнопкой расширения, по щелчку которой я отправлю выбранную страну и получаю носителей этой конкретной страны. Получив ответ, я хочу создать пользовательский HTML на основе ответа и добавить html после выбранной строки.
Вот скриншоты, а также полный рабочий процесс :)
Шаг 2
Шаг 3