用于字符串数组的 vaadin-grid-filter 不起作用

Question

我将 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 对象中并按照文档中的方式访问它，那么它可以正常工作。 但我想知道是否有一种方法可以按原样过滤。

提前谢谢你。

Answer 1

我对 vaadin-grid 源代码进行了一些挖掘，发现了一些不太理想的答案。不幸的是，path 属性值似乎没有任何“神奇”占位符，可以在为[[item]] 使用“x-array-data-provider”组件的上下文中为您提供所需的内容。以下是我尝试的几个值及其结果：

"" ：过滤机制尝试检索item[""] 属性以进行字符串比较。不幸的是，item[""] 将是未定义的，并且比较将无法匹配。

null/undefined ：在逻辑的早期对此进行检查，这将中止整个过滤过程。

不幸的是，由于在默认 JS 对象中缺少任何可用的自引用对象属性（我知道），我无法以某种方式绕过属性访问器来获得您想要的东西。

不过，我确实在使用服务器数据提供程序的情况下找到了一种潜在的解决方法。使用 vaadin-grid-filter 示例（来自 vaadin）here，看起来过滤请求可以被序列化并发送到服务器。如果您可以完全控制远程服务器数据提供程序代码的内部，那么您可以在那里编写自己的自定义过滤机制来完成您想要的。这是示例中的代码（以防删除）：

<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>