Мне нужна ваша помощь.
Я создаю вложенную таблицу уровня N с динамическими столбцами
Итак, я хочу создать таблицу с переменным числом столбцов на основе выбора пользователя. Для этого я создал простое раскрывающееся окно, в соответствии с выбором раскрывающегося списка, эти выбранные столбцы будут появиться в таблице
Я хочу, чтобы мой первый столбец таблицы всегда был фиксированным, в то время как другие можно прокручивать по горизонтали, а ширину этих столбцов следует настраивать в соответствии с отображением или скрытием столбцов
Я не хочу использовать какие-либо внешние библиотеки. Я создал пользовательскую таблицу на основе div вместе с сеткой CSS
Ниже приведены скриншоты того, что я делал до сих пор
Вот код для справки:
HTML:
<ng-container *ngFor="let rData of reportData; let i = index; last as isLast" >
<div class="myTr report-row">
<div class="myTd">
<button
class="btn report-btn-sm"
*ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == true"
(click)="splitData(rowWiseFilterObj(rData,this.splitOpt[0].id),this.splitOpt[0].id,sFilters,splitOpt,i,rData,selectedDate)"
row="rData">+</button>
<button
class="btn report-btn-sm"
*ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == false"
(click)="removeDynamicComponent(rData,i)"
>-</button>
<span *ngIf="this.splitOpt[0].id == 'campid'">{{rData['campaign_name']}}</span>
<span *ngIf="this.splitOpt[0].id !== '__time' && this.splitOpt[0].id !== 'campid'">{{rData[this.splitOpt[0].id]}}</span>
<span *ngIf="this.splitOpt[0].id === '__time'">{{ rData[this.splitOpt[0].id] | date:'dd-MM-yyyy HH:mm:ss Z'}}</span>
</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">{{convertToDecimals(rData.impressions,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.conversions,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.bids,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.wins,2)}}</div>
<div class="myTd">$ {{convertToDecimals(rData.spend,2)}}</div>
<div class="myTd">
<button class="btn btn-secondary m-btn m-btn--label-danger m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" *ngIf="this.splitOpt[0].id=='campid'" (click)="excludeReport(rowWiseFilterObj(rData,this.splitOpt[0].id))"> <i class="la la-close"></i> </button>
<button class="btn btn-secondary m-btn m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" disabled="disabled" *ngIf="this.splitOpt[0].id!='campid'"> <i class="la la-ban"></i> </button>
</div>
</div></div>
</div>
<div *ngIf="isLast" class="text-right col-12">{{altrows("#ffffff","#f5f5f5")}}
<a href="javascript:void(0)" class="m-link" (click)="loadmore()" style=" margin: 10px -30px 15px 10px;
background: #5ccdde;
color: #fff;
padding: 2px 10px;
font-size: 12px;" *ngIf="reportData.length > 19"> Load more </a>
</div>
<ng-template #dynamic ></ng-template>
</ng-container>
<div class="myTr" style="margin-top:20px;">
<div class="myTd"></div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd"></div>
</div></div>
</div>
</div>
JS:
getReport() {
this.hidePopup();
if(this.splitOpt.length === 0) {
// this.updateGraph(this.currentGraphSelection);
return false;
}
var apiFilters: any = [{}];
for (var i = 0; i < this.sFilters.length; i++) {
if (this.sFilters[i].values.length > 0) {
var k;
k = this.sFilters[i].id
apiFilters[0][k] = this.sFilters[i].values
}
}
var split = this.splitOpt[0].id;
this.reportData=[];
this.reportLoading = true;
this._apis.getReportData(split, apiFilters[0],this.selectedDate,1,20).subscribe(response => {
if (response.status == 1200) {
this.reportData = response.data.split_by_data;
this.reportData.map(function(obj) {
obj.isCollapsed = true;
return obj;
});
this.totalImpressions=response.data.totalCount[0].impressions;
this.totalConversions=response.data.totalCount[0].conversions;
this.totalBids=response.data.totalCount[0].bids;
this.totalWins=response.data.totalCount[0].wins;
this.totalSpend=response.data.totalCount[0].spend;
this.reportLoading = false;
var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
this.cd.detectChanges();
}
});
}