Question

我正在使用带聚合物2.x的vaadin-grid-filter，我遇到了以下问题。我有一个vaadin-grid-column，如下所示，

[[item]]

path是一个字符串数组，当BEGIN DECLARE due_amount DECIMAL(9,2); SET due_amount = (SELECT due_amount FROM ( SELECT id, MAX(date), due_amount, user_id FROM lunch_transaction GROUP BY user_id HAVING user_id = user) l); IF due_amount IS NULL THEN SET due_amount = 0.00; END IF; RETURN due_amount; END设置为空字符串时，过滤不起作用。如果我将每个字符串放在一个Json对象中并像在文档中那样访问它，那么它可以正常工作。但我想知道是否有一种方法可以过滤掉它。

提前谢谢。

Answer 1

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

＆＃34;＆＃34; ：过滤机制尝试检索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不起作用

1 个答案: