Vaadin-网格使用angular2单击方法显示/隐藏列

Question

在我的angular2项目中，我有一个vaadin网格，它有不同的列，比如(列大号: firstname、lastname、age、city、country)。我正在尝试隐藏和显示姓氏列的功能。每当我单击firsname的列标题时，只有lastname列必须隐藏/显示在vaadin-网格中。

有人能帮我完成我的任务吗。

谢谢。

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>元素的这样一个用例将导致一个糟糕的UX。默认情况下，网格的标题不是设计为可单击的。因此，它们看起来不活跃，所以用户不会认为它们是可点击的链接或按钮。

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

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

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

您的用例很难实现，因为需求也不是在Vaadin中设计的。为了达到这个目的，我不得不采取一些不愉快的解决办法。请使用解决方案学习，而不是盲目地复制代码。下文对此作了说明。

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

首先，在Vaadin中，DOM内容不是动态的。它们被视为初始配置，而不是直接作为网格内容使用。因此，无法绑定模板中的标头单击。

在我的解决方案中，我们将事件侦听器附加到网格本身。在捕捉到网格上的单击后，我们需要手动确定是否单击了标头并找到单击的列索引。为了做到这一点，我们：

1. 获取事件目标引用。单击发生在网格的本地DOM中。如果聚合物使用Shadow (默认禁用)，event.target将返回网格而不是实际事件目标。使用聚合物API确保有正确的目标，无论聚合物设置： 变量目标: Element =(Window).Polymer.dom(事件).rootTarget；
2. 检查单击目标和DOM树中的所有元素，直到结束(如果聚合物处于阴影DOM模式)或网格本身(如果聚合物使用Shady DOM，这是默认模式)来查找列标题单元格元素。对于这个检查，我们使用高分子API来检查元素类名。我们为ngAfterViewInit()方法中的第一个名称列标题设置了一个自定义类名。

- If the header cell element is found, stop the search and call `this.toggleLastNameVisible();`.
- If the header cell element is not found, then it’s not the first name grid header that was clicked. Do nothing.

​

请注意，我们希望对单击作出反应，但我们必须侦听网格上的"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网格文档和API参考，您可以了解更多关于grid的信息。希望这有助于更好地理解网格是如何工作的。

Answer 2

你可以在*ngIf的基础上这样做。

默认情况下，在姓氏上使用*ngIf条件，布尔变量为false，每次单击名称时都使其为真。

我希望它对你有用:)