Question

看看我已经准备好here的堆叠闪电战。

使用如上所述的ColumnChooserComponent，我想实现两件事：

找出当前可见的列。
将string[]与我想以编程方式显示/隐藏列的名称列。

目标是最终将这些值以json的形式存储在服务器中，然后根据用户的设置进行加载。我已经阅读了文档（grid和column chooser），但到目前为止，我所得到的只是 all 列的列表，不知道哪些可见，哪些可见不是。理想情况下，我希望您使用上面介绍的功能来完成我在堆叠闪电战中留为空白的功能logVisible和loadFromArray。

任何帮助将不胜感激。预先感谢。

更新：我正在寻找的答案是用户 StepUp 的更新1。

Answer 1

可以创建所需列的字符串数组，并仅在加载网格时显示它们：

testCols: string[] = ['ProductID', 'ProductName', 'QuantityPerUnit'];

和html：

<kendo-grid #grid [data]="gridData" [height]="410">
    <ng-template ngFor [ngForOf]="testCols" let-column>
        <kendo-grid-column field="{{column}}">
            <ng-template kendoGridHeaderTemplate let-dataItem>
                {{dataItem.field}}
            </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem>
                <p> {{ dataItem[column] | json }} </p>
            </ng-template>    
        </kendo-grid-column>
    </ng-template>
</kendo-grid>

A stackblitz example can be seen here.

更新：

然后，您可以使用hidden的{{1}}属性。

因此，您可以创建一个kendo-grid-column数组，然后只需推送应隐藏的列即可。

然后，在保存用户设置之后，您可以将隐藏的列推入hiddenColumns。

TypeScript：

hiddenColumns

HTML：

public hiddenColumns: string[] = [];

A grid example with hide button can be seen here.

更新1：

您可以创建<kendo-grid [data]="gridData" style="height:400px"> <ng-template ngFor [ngForOf]="columns" let-column> <kendo-grid-column field="{{column}}" [hidden]="hiddenColumns.indexOf(column) > -1" > <ng-template kendoGridHeaderTemplate let-dataItem> {{dataItem.field}} <button (click)="hideColumn(dataItem.field)" class="k-button k-primary" style="float: right;" > Hide </button> </ng-template> </kendo-grid-column> </ng-template> </kendo-grid>的数组：

choosenColumns

An work example with kendo-grid-column-chooser at stackblitz can be seen here.

Answer 2

一种比用户StepUp建议的方法更好的方法。他们的解决方案访问ColumnList类的私有属性，这是不好的做法。我发现了一种只使用可公开访问的属性的方法。

在上面的堆叠闪电战中，我完成了logVisible和loadFromArray函数，如下所示：

  // Use this function to console.log currently visible columns.
  public logVisible = () => {
    const visible = this.grid.columnList
      .filter(c => c.hidden !== true)
      .map(c => c.title);
    console.log(visible);
  };

  // Use this function to load columns from a string[].
  public loadFromArray = () => {
    const testCols: string[] = ["ID", "Name", "Discontinued"];
    this.grid.columnList.forEach(c => {
      if(!testCols.includes(c.title)) {
        c.hidden =  true;
      }
    })
  };

新的堆叠闪电战：https://stackblitz.com/edit/angular-hbekff-hhgqes

重要说明：：在尝试查找可见列时，我强烈建议使用检查c.hidden !== true，因为默认情况下hidden的{{1}}属性为{ {1}}，而不是ColumnBase！这花了我一段时间才弄清楚；我在检查undefined时得到了错误的结果，无法确定发生了什么。

使用Kendo的列选择器在Kendo网格中使用代码加载列

2 个答案: