Vaadin-grid 通过使用 angular2 的单击方法显示/隐藏列

Question

我的 angular2 项目 中有一个 vaadin-grid，其中包含不同的列，例如（列 heder：名字、姓氏、年龄、城市、国家/地区）。我正在尝试隐藏和显示姓氏列的功能。每当我单击 firsname 的列标题时，只有 lastname 列必须在 vaadin-grid 中隐藏/显示。

谁能帮我完成任务。

谢谢。

app.html

      <h2>hello</h2>
            <vaadin-grid>
            <table>
                <colgroup>
                    <col name="Name" click="res()">
                    <col name="Value">
                    <col name="Progress" hidable>
                </colgroup>

                <tbody>
                    <tr>
                        <td>Project A</td>
                        <td>10000</td>
                        <td>0.8</td>
                    </tr>
                    <tr>
                        <td>Project B</td>
                        <td>999999</td>
                        <td>0.8</td>
                    </tr>
                </tbody>
            </table>
        </vaadin-grid>

app.component.ts

    import { Component } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';


@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html',

    styles: [`
                vaadin-grid {
                    height: 100%;
                }
          `],
    directives: [
        PolymerElement('vaadin-grid')
    ]
})
export class AppComponent {
    res(){
        console.log("hi tis is method");

    }
 }

Answer 1

<vaadin-grid> 元素的这种用例会造成糟糕的用户体验。默认情况下，网格的标题不是可点击的。因此它们看起来不活跃，因此用户不会将它们视为可点击的链接或按钮。

对于 Vaadin Grid，请考虑通过指定 <col hidable> 属性来隐藏列。这将使用户能够通过在网格标题右侧的漂亮下拉菜单中选择那些来切换显示的列。有关示例，请参阅网格文档中的 Hiding Columns 部分。

如果您想通过单击在不同内容之间切换，最好使用专门为此设计的元素，例如<paper-tabs>。

---

Plunker 中的解决方案：https://plnkr.co/edit/Sz92H4?p=preview

您的用例难以实现，因为 Vaadin Grid API 中也没有设计需求。为了实现它，我不得不应用一些令人不快的解决方法。请使用解决方案进行学习，而不是盲目复制代码。警告说明如下。

如何绑定网格标题点击事件

首先，在 Vaadin Grid 中，DOM 内容不是动态的。它们被视为初始配置，不直接用作网格内容。因此，不能在模板中绑定表头点击。

在我的解决方案中，我们将事件侦听器附加到网格本身。在捕捉到网格的点击后，我们需要手动判断是否点击了标题并找到点击的列索引。为此，我们：

1. 获取事件目标引用。单击发生在网格的本地 DOM 中的某处。如果 Polymer 使用 Shadow DOM（默认禁用），event.target 将返回网格而不是实际的事件目标。使用 Polymer API 确保无论 Polymer 设置如何都具有正确的目标：

   var target: Element = (<any> window).Polymer.dom(event).rootTarget;
   

2. 检查点击目标和 DOM 树中的所有元素直到最后（如果 Polymer 处于 Shadow DOM 模式）或网格本身（如果 Polymer 使用 Shady DOM，这是默认模式）以查找列标题细胞元素。对于这个检查，我们使用 Polymer API 来检查元素类名。我们在ngAfterViewInit() 方法中为名字列标题设置了自定义类名。

   • 如果找到标题单元格元素，停止搜索并调用this.toggleLastNameVisible();。
   • 如果未找到标题单元格元素，则不是单击的名字网格标题。什么都不做。

请注意，我们希望对点击做出反应，但我们必须在网格上侦听“mouseup”事件而不是点击事件。原因是有时网格会在单击标题后重新呈现其内容，这会破坏标题单元格元素的查找。 Mouseup 在这里工作，因为它在网格进程点击之前被触发。

如何以编程方式显示和隐藏列

现在我们解决了标题点击绑定问题，我们必须显示选定的列并隐藏其他列。再一次，我们不能只在模板中绑定<col [hidden]="showOrHide"> 属性，也不能使用*ngIf 来删除隐藏的列。因为网格 DOM 内容不是动态的。

我们必须获取网格元素引用并使用网格 API：

@ViewChild('grid') gridRef: any;

toggleLastNameVisible(visible?: boolean) {
  this._isLastNameVisible = visible !== undefined ? visible : !this._isLastNameVisible;
  var grid: any = this.gridRef.nativeElement;
  // Assuming that the last name is the second column
  grid.set('columns.1.hidden', !this._isLastNameVisible);
}

注意，模板中添加了ref：<vaadin-grid #grid ...>

您可以通过阅读Vaadin Grid Documentation 和API Reference 了解有关网格API 的更多信息。希望这有助于更好地理解网格的工作原理。

Answer 2

你可以在 *ngIf 的基础上做到这一点。

在您的姓氏上使用 *ngIf 条件，默认情况下将布尔变量设为 false，并在您每次点击名字时将其设为 true。

我希望它对你有用:)