时间戳

首页 > 解决方案 > 如何在聚合物 3 中实现 vaadin-grid-tree-column

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

问题描述

我在应用程序模板中有以下内容：

<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节点不会出现。

标签： vaadinpolymer-3.xvaadin-grid

解决方案

我有解决办法。

<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

推荐阅读