表过滤器不使用退格键 [英] Table filter not working with backspaces

问题描述

我正在根据内置的搜索功能，使用handontable复制一个实时过滤器框。 http://docs.handsontable.com/0.15。 0-beta6 / demo-search-for-values.html 。

I'm working on reproducing a live filter box with handsontable based on the built in search functionality at http://docs.handsontable.com/0.15.0-beta6/demo-search-for-values.html.

现在我的基本设置工作在 http://jsfiddle.net/uL3L4teL/4/

Right Now I've got a basic setup working at http://jsfiddle.net/uL3L4teL/4/

如文档中所述，在此代码中，如果输入搜索字符串，则使用以下函数获取输出到控制台的匹配单元格：

As explained in the docs, In this code if you enter a search string, you get the matching cells outputted to the console using the following function:

Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {
    var queryResult = hot.search.query(this.value);
    console.log(queryResult);
    // ...
});

我想抓住数据数组中与搜索字符串匹配的行并过滤原始数据'重新显示表之前搜索字符串的数据。这部分可以使用：

I want to grab the rows in the data array that match the search string and filter the original data 'data' by the search string before redisplaying the table. This partially works using:

Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {
  // debugger
  hot.loadData(tData);

  var queryResult = hot.search.query(this.value);
  rows = getRowsFromObjects(queryResult);
  console.log('searchFiled',searchFiled.value);
  console.log('rows',rows);

  console.log('tData', tData);
  var filtered = tData.filter(function (d, ix) {
      return rows.indexOf(ix) >= 0;
  });
  console.log('filtered', filtered);

  hot.loadData(filtered);

});

然而，当我运行这个时，我在控制台中看到以下内容，当我输入'n'后跟退格（清空搜索字符串）：

However when I run this I see the following in the console when I enter 'n' followed by backspacing (to empty the searchstring):

输入'n'：

rows [0, 1]
searchFiled n
rows [0, 1]
tData [Array[4], Array[4], Array[4], Array[4]]
filtered [Array[4], Array[4]]

退格（清空搜索值） ）：

backspace (to empty search value):

rows []
searchFiled 
rows []
tData [Array[4], Array[4], Array[4], Array[4]]
filtered []

如何解决此问题，以便空字符串将再次显示整个未过滤的表？

How can I fix this so an empty string will again show the entire unfiltered table?

推荐答案

您可以添加条件在 .filter（）方法内部，如果值 searchFiled.value 为空或未定义，将返回所有行：

You could add a condition inside of the .filter() method that will return all rows if the value searchFiled.value is empty or undefined:

更新示例

var filtered = tData.filter(function(_, index) {
  if (searchFiled.value) {
    return rows.indexOf(index) >= 0;
  } else {
    return true;
  }
});

或者，这是一个同样的东西（尽管它不太可读）：

Alternatively, here is a one-liner that does the same thing (although it is less readable):

更新示例

var filtered = tData.filter(function(_, index) {
  return !searchFiled.value || rows.indexOf(index) >= 0;
});

这篇关于表过滤器不使用退格键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！