Vaadin-grid show/hide 使用 angular2 的点击方法的列

Question

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

中的姓氏列必须 hide/show

任何人都可以帮助我完成我的任务。

谢谢。

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

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

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

希望对你有用:)

Answer 2

<vaadin-grid> 元素的这种用例会产生糟糕的用户体验。默认情况下，网格的 header 未设计为可点击。因此它们看起来不活动，因此用户不会将它们视为可点击的链接或按钮。

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

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

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

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

如何为网格绑定header点击事件

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

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

获取事件目标引用。单击发生在网格的局部 DOM 某处。如果 Polymer 使用 Shadow DOM（默认禁用），event.target 将 return 网格而不是实际的事件目标。使用 Polymer API 以确保无论 Polymer 设置如何都具有正确的目标：
```
var target: Element = (<any> window).Polymer.dom(event).rootTarget;
```
检查点击目标和 DOM 树中向上的所有元素直到结束（如果 Polymer 处于阴影 DOM 模式）或网格本身（如果 Polymer使用 Shady DOM，这是默认模式）来查找列 header 单元格元素。对于此检查，我们使用 Polymer API 来检查元素 class 名称。我们在 ngAfterViewInit() 方法中为名字列 header 设置自定义 class 名称。
- 如果找到 header 单元格元素，则停止搜索并调用 this.toggleLastNameVisible();。
- 如果未找到 header 单元格元素，则单击的不是名字网格 header。什么都不做。

请注意，我们想要对点击做出反应，但我们必须监听网格上的 "mouseup" 事件而不是点击事件。原因是有时 re-renders 单击 header 后网格的内容会破坏 header 单元格元素查找。 Mouseup 在这里起作用，因为它在网格进程点击之前触发。

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

现在我们解决了 header 点击绑定问题，我们必须显示所选列并隐藏其他列。再次重申，我们不能只在模板中绑定 <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 and the API Reference 了解更多关于网格 API 的信息。希望这有助于更好地理解网格的工作原理。

Vaadin-grid show/hide 使用 angular2 的点击方法的列

Vaadin-grid show/hide the columns by click method using angular2

vaadin

vaadin-grid

angular

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

如何为网格绑定header点击事件

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