有时在过滤器中输入后我无法获得匹配数据。如何使用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();
}
它显示数据。我想通过过滤器过滤数据以匹配数据,但是它不能匹配数据。