如何在聚合物 3 中实现 vaadin-grid-tree-column答案

【问题标题】：How do I implement vaadin-grid-tree-column in polymer 3如何在聚合物 3 中实现 vaadin-grid-tree-column
【发布时间】：2019-05-10 14:05:55
【问题描述】：

我在申请模板中有以下内容：

<vaadin-grid id="directory">
  <vaadin-grid-tree-column path="name" header="Name"></vaadin-grid-tree-column>
</vaadin-grid>

iron-ajax 在成功响应时调用以下内容：

  getlist(request) {
    var myResponse = request.detail.response;
    console.log(myResponse);
    this.$.directory.items = myResponse;
  }

返回的数据是：

[
  {
    "name": "apps",
    "fullpath": "/db/system/xqdoc/apps",
    "children": [
      {
        "name": "xqDoc",
        "fullpath": "/db/system/xqdoc/apps/xqDoc",
        "children": [
          {
            "name": "modules",
            "fullpath": "/db/system/xqdoc/apps/xqDoc/modules",
            "children": [
              {
                "name": "config.xqm.xml",
                "fullpath": "/db/system/xqdoc/apps/xqDoc/modules/config.xqm.xml"
              },
              {
                "name": "xqdoc-lib.xqy.xml",
                "fullpath": "/db/system/xqdoc/apps/xqDoc/modules/xqdoc-lib.xqy.xml"
              }
            ]
          }
        ]
      }
    ]
  }
]

apps 出现了，但是当我展开 apps 节点时，xqDoc 节点不会出现。

我需要数据集中的其他数据吗？
我是否缺少一些需要的编码？

【问题讨论】：

说：分层数据仅适用于 dataProvider。使用项目将无法与树形网格一起正常工作。 vaadin.com/components/vaadin-grid/html-examples/grid-tree-demos

标签： vaadin polymer-3.x vaadin-grid

【解决方案1】：

我有办法。

<vaadin-grid id="directory" selected-items="{{selected}}">
    <vaadin-grid-tree-column path="name" header="Name"item-has-children-path="hasChildren"></vaadin-grid-tree-column>
</vaadin-grid>

我使用connectedCallback 设置提供程序，而不是使用iron-ajax 与服务器通信。

  connectedCallback() {
    super.connectedCallback();

    const grid = this.$.directory;

    this.$.directory.dataProvider = function(params, callback) {

      let url = "/exist/restxq/xqdoc/level" +
      '?page=' + params.page +         // the requested page index
      '&per_page=' + params.pageSize; // number of items on the page

      if (params.parentItem) {
        url += '&path=' + params.parentItem.fullpath;
      }

      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        callback(
          response.data, // requested page of items
          response.totalSize  // total number of items
        );
      };
      xhr.open('GET', url, true);
      xhr.send();
    };

    this.$.directory.addEventListener('active-item-changed', function(event) {
      const item = event.detail.value;

      if (item && item.hasChildren == false) {
        grid.selectedItems = [item];
      } else {
        grid.selectedItems = [];
      }
    });
  }

Web 服务返回树的一个级别：

{
    "totalSize": 2,
    "data": [
        {
            "name": "apps",
            "fullpath": "/apps",
            "hasChildren": true
        },
        {
            "name": "lib",
            "fullpath": "/lib",
            "hasChildren": true
        }
    ]
}

代码库在这里：https://github.com/lcahlander/xqDoc-eXist-db

【讨论】：