Как реализовать vaadin-grid-tree-column в полимере 3 - PullRequest
Новая
       34

Как реализовать vaadin-grid-tree-column в полимере 3

1 голос
/ 10 мая 2019

У меня есть следующее в шаблоне приложения: 

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

Железный аджакс при успешном ответе вызывает следующее: 

  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 не отображаются.

  • Нужны ли дополнительные данные в наборе данных?
  • Мне не хватает какого-то кодирования, которое нужно?

1 Ответ

1 голос
/ 16 мая 2019

У меня есть решение. 

<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 = [];
      }
    });
  }

Веб-сервис возвращает уровень дерева: 

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

Кодовая база здесь: https://github.com/lcahlander/xqDoc-eXist-db

...