Question

我正在使用vaadin文档中的以下示例以及polymer3

<vaadin-grid id="grid" aria-label="Remote Data Example">
  <vaadin-grid-column path="firstName"></vaadin-grid-column>
  <vaadin-grid-column path="lastName"></vaadin-grid-column>
  <vaadin-grid-column path="email"></vaadin-grid-column>
</vaadin-grid>
<script>
  window.addEventListener('WebComponentsReady', function() {
    const grid = document.querySelector('vaadin-grid');

    grid.size = 200;
    grid.dataProvider = function(params, callback) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        callback(JSON.parse(xhr.responseText).result);
      };
      var index = params.page * params.pageSize;
      xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
      xhr.send();
    };
  });
</script>

我不知道如何使用聚合物数据绑定从加载的项目中更新行

我尝试使用items访问网格中的this.$.grid.items属性，但这总是返回项目数

我希望能够做类似的事情 this.$.grid.items[0].firstName = 'changed'并将更改退回网格

感谢您的帮助

Answer 1

当前，使用dataProvider时没有用于更新单个项目的API。一种选择是使用grid.clearCache()，它再次为可见行生成网格请求数据。当然，在这种情况下，将项目存储在附加的缓存中将很有用，以避免不必要的服务器请求。如果您使用path或renderer，还可以在更改项目子属性后调用grid.render()。

请参见vaadin/vaadin-grid#1526和相关论坛主题

使用dataProvider

1 个答案: