Question

我正在使用ngx-datatable来按行分组呈现数据表。

这是HTML代码

<ngx-datatable [rows]="data" [loadingIndicator]="loadingIndicator" [groupExpansionDefault]="false"
    [groupRowsBy]="'Route'">
    <!-- Header Template -->
    <ngx-datatable-group-header [rowHeight]="60">
        <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
            <div class="table-group-header group-header">
                <span style="cursor: pointer" [class.datatable-icon-right]="!expanded"
                    [class.datatable-icon-down]="expanded" (click)="toggleExpandWaybills(group)">
                    {{group.key}}
                </span>
            </div>
        </ng-template>
    </ngx-datatable-group-header>

    <ngx-datatable-column name="Route" [width]="200">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.route}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Price" [width]="100">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.price}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Days" [width]="50">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.days}}
        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

这是它的样子

我看到的示例提供了一个将在标题行中呈现的模板。我想要的是标题行中每列的总和（图像中标有红色框）。如何在组标题行中同时提供多个列？

我尝试在同一单个模板下提供具有适当宽度的所有值，但是问题是模板中div的宽度是固定的，并且由于可以在ngx-datatable中更改列大小，因此标头行模板布局不适合（因为我提供了固定宽度）。

这是我的操作方式

<ngx-datatable-group-header [rowHeight]="60">
    <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <div class="table-group-header group-header">
            <span style="cursor: pointer" [class.datatable-icon-right]="!expanded"
                [class.datatable-icon-down]="expanded" (click)="toggleExpandWaybills(group)">
                <span style="width: 300px;">
                    {{group.key}}
                </span>
                <span style="width: 100px;">
                    {{sumPropertyInArray(group.value, 'price') | number: 0}}
                </span>
                <span style="width: 50px;">
                    {{sumPropertyInArray(group.value, 'days')}}
                </span>
            </span>
        </div>
    </ng-template>
</ngx-datatable-group-header>

Answer 1

经过数小时的哭泣，我找到了部分解决方案。这并非没有妥协，但对我而言，它已经足够好了。

首先，为列设置初始宽度。您已经通过使用完成了此操作。但是，我建议使用将public class ScreenReceiver extends BroadcastReceiver { public static boolean wasScreenOn = true; @Override public void onReceive(Context context, Intent intent) { if (intent.getAction().equals(Intent.ACTION_SCREEN_OFF)) { // DO WHATEVER YOU NEED TO DO HERE Vibrator v = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE); long[] pattern = new long[]{0, 400, 200, 400}; // Only perform this pattern one time (-1 means "do not repeat") v.vibrate(pattern, -1); wasScreenOn = false; } else if (intent.getAction().equals(Intent.ACTION_SCREEN_ON)) { // AND DO WHATEVER YOU NEED TO DO HERE wasScreenOn = true; } } } public class ExampleActivity extends Activity { @Override protected void onCreate() { // INITIALIZE RECEIVER IntentFilter filter = new IntentFilter(Intent.ACTION_SCREEN_ON); filter.addAction(Intent.ACTION_SCREEN_OFF); BroadcastReceiver mReceiver = new ScreenReceiver(); registerReceiver(mReceiver, filter); // YOUR CODE } @Override protected void onPause() { // WHEN THE SCREEN IS ABOUT TO TURN OFF if (ScreenReceiver.wasScreenOn) { // THIS IS THE CASE WHEN ONPAUSE() IS CALLED BY THE SYSTEM DUE TO A SCREEN STATE CHANGE System.out.println("SCREEN TURNED OFF"); } else { // THIS IS WHEN ONPAUSE() IS CALLED WHEN THE SCREEN STATE HAS NOT CHANGED } super.onPause(); } @Override protected void onResume() { // ONLY WHEN SCREEN TURNS ON if (!ScreenReceiver.wasScreenOn) { // THIS IS WHEN ONRESUME() IS CALLED DUE TO A SCREEN STATE CHANGE System.out.println("SCREEN TURNED ON"); } else { // THIS IS WHEN ONRESUME() IS CALLED WHEN THE SCREEN STATE HAS NOT CHANGED } super.onResume(); } }对象作为模型绑定到数据表：

然后，在您的[width]上注册一个columns回调：

[resize]

对应的ngx-datatable文件的构造函数：

<ngx-datatable
        #loadTable
        class="material"
        [rows]="loadData$ | async"
        .....
        [columns]="columns"
        ...
        ...
        (resize)="onResize($event)"
      >

然后，在您的回调中：

.ts

到目前为止一切顺利。我们设法跟踪有关列的调整大小事件。如果要继续使用this.columns = [ { name : 'Name', prop : 'name', width : 200 }, .... ]列定义，则必须在组件中为onResize(event){ this.columns.find(col => col.name == event.column.name).width = event.newValue }定义一个映射数组，并将更改后的大小存储在那里。

现在是hacky部分。不要将固定宽度应用于跨度样式，而使用html并绑定到回调：

[colName, newSize]

然后，在您的组件中：

[ngStyle]

请注意，这会将跨度的<span [ngStyle]="getWidth('Name')"> <b>Test</b> </span>设置为下一列的确切开始。但是，这不是该列中文本的开头，因为已应用了填充。就我而言，该填充为19.2px。如果您想对此进行补偿，只需将填充添加到新应用的宽度即可。

我一般对getWidth(rowName){ let val = this.columns.find(col => col.name == rowName).width + "px" return {"width" : val} }和width还是陌生的，如果对阅读本书后感到不舒服的人感到抱歉。

ngx-datatable angular6中的组行标题中有多个列

1 个答案: