无论如何用 Handsontable 过滤行?
Posted
技术标签:
【中文标题】无论如何用 Handsontable 过滤行?【英文标题】:Anyway to filter rows with Handsontable? 【发布时间】:2015-04-03 07:16:12 【问题描述】:我目前正在尝试在 handsontable 中的列上添加搜索过滤器。我可以使用搜索插件的callback
来隐藏带有 css 的行,但这会破坏滚动。搜索插件似乎也只查看表的前 100 个左右。
是否存在将行过滤添加到 handsontable 的任何插件?
【问题讨论】:
【参考方案1】:对我来说,它们是使用 Handsontable 进行实时过滤的两种情况。 一个columns filters,和/或search filter。
1。单个列过滤器
每列一个文件允许同时应用多个过滤器:
function filter()
var row, r_len, col, c_len;
var data = myData; // Keeping the integrity of the original data
var array = [];
var match = true;
for (row = 0, r_len = data.length; row < r_len; row++)
for(col = 0, c_len = searchFields.length; col < c_len; col++)
if(('' + data[row][col]).toLowerCase().indexOf(searchFields[col]) > -1);
else match=false;
if(match) array.push(data[row]);
match = true;
hot.loadData(array);
在this JS Fiddle 中找到工作示例
2。搜索过滤器
允许在表中任意位置搜索任何值的字段:
function filter(search)
var
row, r_len,
data = myData, // Keeping the integretity of the original data
array = [];
for (row = 0, r_len = data.length; row < r_len; row++)
for(col = 0, c_len = data[row].length; col < c_len; col++)
if(('' + data[row][col]).toLowerCase().indexOf(search) > -1)
array.push(data[row]);
break;
hot.loadData(array);
在this JS Fiddle 中找到工作示例
在这两种情况下,如果数据注定要被修改,那么每次应用过滤器时都必须保持原始数据的完整性。您可以参考前两个链接了解这两个案例的更多详细信息。
请注意,这两个功能可以合并使用。
【讨论】:
【参考方案2】:据我所知,搜索插件将搜索所有行,但仅突出显示它们,并且仅突出显示那些被渲染的行。这意味着,由于延迟渲染(HOT 仅渲染可见窗口),如果您尝试使用 css 搜索现在为蓝色的单元格,您将度过一段糟糕的时光。相反,您可以使用它返回的具有所有匹配行的对象。
从这里开始隐藏不匹配的行,这变得很难。我所做的是编写一个简单的函数,它物理地更改data
数组,以便匹配的行位于顶部,然后我隐藏其余的行。这样滚动效果很好。
希望有效!
【讨论】:
不幸的是,这不能很好地用于列排序。我正在使用回调来获取受搜索影响的行,但它似乎在放弃之前只搜索了 100 行。 你能给我们看一个jsfiddle吗?这不应该发生。我在一个有 10,000 行的数据数组上使用hot.search.query(value)
运行搜索插件,然后我得到所有匹配行的数组,远远超过 100【参考方案3】:
我需要做类似的事情。经过一番谷歌搜索,我发现了以下演示:
http://my-waking-dream.blogspot.co.uk/2013/12/live-search-filter-for-jquery.html
但是我很想知道是否有人有其他方法可以对列排序友好。
【讨论】:
【参考方案4】:我不是 JS 专家,但有一个使用 http://jsfiddle.net/awyjnbj6/ 的基本示例。这是我在Table filter not working with backspaces 的问题的答案。
这包括:
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);
);
【讨论】:
以上是关于无论如何用 Handsontable 过滤行?的主要内容,如果未能解决你的问题,请参考以下文章