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

Question

我正在使用带聚合物2.x的vaadin-grid-filter,我遇到了以下问题.我有一个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属性值占位符可以让您在使用“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>