vaadin-grid-filter для массива строк не работает - PullRequest
Новая
       34

vaadin-grid-filter для массива строк не работает

0 голосов
/ 28 мая 2018

Я использую vaadin-grid-filter с Polymer 2.x и столкнулся со следующей проблемой.У меня есть vaadin-grid-column, как показано ниже, 

<vaadin-grid-column width="15em">
        <template class="header">
            <vaadin-grid-filter aria-label="Inventory" path="" value="[[_filterItems]]">
                <vaadin-text-field slot="filter" placeholder="Item" value="{{_filterItems}}" focus-target></vaadin-text-field>   
            </vaadin-grid-filter>
        </template>
    <template>[[item]]</template>
</vaadin-grid-column>

[[item]] - это массив строк, и фильтрация не работает, если для path задана пустая строка.Если я помещу каждую строку в объект Json и получу доступ к ней, как в документации, то она будет работать нормально.Но мне интересно, есть ли способ, которым я могу отфильтровать это как есть.

Заранее спасибо.

1 Ответ

0 голосов
/ 12 июня 2018

Я немного покопался в исходном коде vaadin-grid и нашел несколько не идеальных ответов.К сожалению, похоже, что для значения свойства path нет «волшебных» заполнителей, которые бы дали вам то, что вы хотите в контексте использования компонента «x-array-data-provider» для [[item]].Вот пара значений, которые я пробовал, и их результаты:

"": механизм фильтрации пытается получить свойство item[""] для сравнения строк.К сожалению, item[""] будет неопределенным, и сравнение не будет совпадать.

null / undefined: в логике есть проверка для этого очень рано, которая прервет любой процесс фильтрации в целом.

Так что, к сожалению, из-за отсутствия какого-либо самоссылающегося свойства объекта (о котором я знаю), доступного в объектах JS по умолчанию, я не смог обойти средство доступа к свойству таким образом, чтобы получить то, что вы хотите.

Однако я нашел потенциальный обходной путь в контексте использования поставщика данных сервера.Используя пример vaadin-grid-filter (из vaadin) здесь , создается впечатление, что запрос на фильтрацию может быть сериализован и отправлен на сервер.Если у вас есть полный контроль над внутренними компонентами кода поставщика данных удаленного сервера, вы можете написать свой собственный механизм фильтрации, чтобы выполнить то, что вы хотите.Вот код из примера (в случае удаления): 

<x-remote-filtering-example></x-remote-filtering-example>
<dom-module id="x-remote-filtering-example">
  <template>
    <vaadin-grid aria-label="Filtering with Data Provider Example" id="grid">

      <vaadin-grid-column width="50px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">
          <vaadin-grid-filter aria-label="Fist Name" path="firstName" value="[[_filterFirstName]]">
            <input placeholder="First Name" value="{{_filterFirstName::input}}" focus-target>
          </vaadin-grid-filter>
        </template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">
          <vaadin-grid-filter aria-label="Last Name" path="lastName" value="[[_filterLastName]]">
            <input placeholder="Last Name" value="{{_filterLastName::input}}" focus-target>
          </vaadin-grid-filter>
        </template>
        <template>[[item.lastName]]</template>
      </vaadin-grid-column>

    </vaadin-grid>
  </template>
  <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'x-remote-filtering-example',

        ready: function() {
          var grid = this.$.grid;

          grid.size = 200;

          grid.dataProvider = function(params, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
              var response = JSON.parse(xhr.responseText);

              // Number of items changes after filtering. We need
              // to update the grid size based on server response.
              grid.size = response.size;

              callback(response.result);
            };

            var index = params.page * params.pageSize;
            var url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;

            // `params.filters` format: [{path: 'lastName', direction: 'asc'}, ...];
            params.filters.forEach(function(filter) {
              url += '&filters[' + filter.path + ']=' + encodeURIComponent(filter.value);
            });

            xhr.open('GET', url, true);
            xhr.send();
          };
        }
      });
    });
  </script>
</dom-module>
...