文章/答案/技术大牛

发布

社区首页 >问答首页 >Hilla的简单树网格示例

问Hilla的简单树网格示例
EN

Stack Overflow用户

提问于 2022-11-11 16:26:39

回答 2查看 40关注 0票数 1

假设我有接近0%的打字记录经验，现在我有了一些Hilla经验(这很棒！)请温柔地对待我，并提供一个简单的树网格的例子。

我希望能做一些简单的事情，比如：

export class GroceryView extends View {
  display a lovely tree view of master detail data.
}

但是vaadin和hilla网站上的例子让人困惑.

export class Example extends LitElement {}

我的电网运转正常。

implementation.

查看了各种文档源和github示例项目。

hilla

typescript

vaadin

回答 2

Stack Overflow用户

发布于 2022-11-11 20:45:44

Hilla中的View类实际上是LitElement的扩展。因此，如果文档示例使用LitElement，则可以将该类的内容复制到视图中，并期望它能够工作。

View和LitElement的主要区别在于，View在元素的轻型DOM中呈现其模板，而LitElement默认在其阴影DOM中呈现其模板。这是因为View定义了createRenderRoot()，它返回this而不是this.attachShadow()。

应该能够将文档中的第一个示例复制到您的GroceryView：https://vaadin.com/docs/latest/components/tree-grid中。

我现在注意到，这些示例并没有显示它们中所有需要的类，主要是DataService和Person域对象。您可以从文档回购中复制这些内容：

票数 1

Stack Overflow用户

发布于 2022-11-15 17:56:15

现在不确定是否需要树网格，我已经通过调用详细信息后端getCareersById()，然后循环创建HTML来显示详细信息列表。我找不到使用后端值列表的任何主/详细信息或树网格示例。

    careersRenderer: GridColumnBodyLitRenderer<Consultant> = (item, _model, column) => {
        return html`
        <div class="w-full flex-wrap bg-contrast-5 py-s px-l">
          ${until(getCareersById(item.careers).then(opts => repeat(opts, (career) => html`
              <h5>${career?.title}</h5>
              <p>${career?.description}</p>
            `)))}
        </div>
        `;
      };

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74405450

复制

相似问题

问Hilla的简单树网格示例
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Hilla的简单树网格示例EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Hilla的简单树网格示例
EN