如何使用数据提供程序在vaadin-grid中向下滚动加载数据?

时间:2019-07-08 01:30:49

标签: dataprovider polymer-3.x vaadin-grid

有时在过滤器中输入后我无法获得匹配数据。如何使用data-provider过滤vaadin-grid中的数据?

这用于使用Polymer 3.0和vaadin-grid。我希望vaadin-grid可以与数据提供者一起工作,但不能匹配数据。

static get template() {
return html`
<iron-ajax
        id="xhrService"
        url=""
        loading="{{loading}}"
        on-response="_serviceResponse"
        last-response="{{logs}}"
        on-error="_serviceError"
        method=""
        content-type="application/json"
        handle-as="json"
        ></iron-ajax>
<vaadin-grid loading="{{loading}}">

        <vaadin-grid-column width="10em" resizable>
          <template class="header">
            <vaadin-grid-sorter path="description">
              <vaadin-grid-filter path="description" value="[[_description]]">
                <input placeholder="Description" value="{{_description::input}}" focus-target>
              </vaadin-grid-filter>
            </vaadin-grid-sorter>
          </template>
          <template>
            <div style="white-space: normal">[[item.description]]</div>
          </template>
        </vaadin-grid-column>

        <vaadin-grid-sort-column path="audit_description" header="Audit" width="6em"></vaadin-grid-sort-column>

        <vaadin-grid-column width="9em" resizable>
          <template class="header">
            <vaadin-grid-sorter path="action_description">
              <vaadin-grid-filter path="action_description" value="[[_actionCode]]">
                <input placeholder="Action" value="{{_actionCode::input}}" focus-target>
              </vaadin-grid-filter>
            </vaadin-grid-sorter>
          </template>
          <template>[[item.action_description]]</template>
        </vaadin-grid-column>
<vaadin-grid>
`;}

static get properties() {
return {
  dataProvider: Object,
  size: Number
}
}

ready(){
super.ready();
this._logsChanged();

}


_logsChanged() {

    var grid = this.shadowRoot.querySelector("vaadin-grid");
    var token = this.userInfo.token;
    grid.size = 5000;
    grid.dataProvider = function(params, callback) {
      const index = (params.page + 1) * params.pageSize;
      var url = MSAppGlobals.apiPath + 'Logs?page=' + params.page + '&count=' + index;
      var xhr = new XMLHttpRequest();

      xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        callback(response.totalLogs);
        localStorage.setItem('logsInfo', JSON.stringify(response.totalLogs));
      };


      params.filters.forEach(function(filter) {
        url += '&filters[' + filter.path + ']=' + encodeURIComponent(filter.value);
      });

      params.sortOrders.forEach(function(sort) {
        url += '&orders[]=' + sort.path + ' ' + sort.direction;
      });


      xhr.open('GET', url, true);
      xhr.setRequestHeader('authorization', 'Bearer ' + token, true);
      xhr.send();
    }

它显示数据。我想通过过滤器过滤数据以匹配数据,但是它不能匹配数据。

0 个答案:

没有答案