字符串数组的 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 属性值似乎没有任何 "magic" 占位符可以让你在使用 "x-array-data-provider" 组件的上下文中得到你想要的 [[item]]。以下是我尝试的几个值及其结果：

"" ：过滤机制尝试检索 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>

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

vaadin-grid-filter for an Array of Strings not working

vaadin

vaadin-grid

polymer-2.x