0

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

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

谢谢你。

应用程序.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");

    }
 }
4

2 回答 2

1

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

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

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

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

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

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

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

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

  1. 获取事件目标引用。单击发生在网格的本地 DOM 中的某处。event.target如果 Polymer 使用 Shadow DOM（默认禁用），将返回网格而不是实际的事件目标。使用 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 网格文档和API 参考来了解有关网格 API 的更多信息。希望这有助于更好地理解网格是如何工作的。

于 2016-07-15T15:40:27.790 回答
0

您可以在 *ngIf 的基础上执行此操作。

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

我希望它对你有用:)

于 2016-07-14T06:41:08.370 回答