我正在寻找的是Handsontable电子表格插件的单独列搜索功能(与此datatables电子表格示例完全相同)。
Handsontable团队已经存在并已经开发出来的是:
是否存在基于来自具有Handsontable的用户的多个输入仅显示相关行的事情?
根据这个blog的解决方案,我设法编写了一个解决方案。
See this JS fiddle that answers all my requirements.
我正在寻找的主要功能是这个:
// The function push every row satisfying all the input values into an array that is loaded
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);
}
我所做的是保持同步一个字符串表与输入字段(searchFields),比较输入和相应列之间每行的数据,并将相关行推入数组,以最终显示结果数组。对输入字段中的任何更改调用此函数,这会导致实时表过滤。
请注意,我尝试了大约10k行的解决方案,并且它们与Chrome,Firefox和IE无任何性能问题。
还要注意,我设法找到一个解决方案,在编辑值时保持当前显示的表与原始数据的同步,但这是IMO超出了这个问题的范围。如果您对此感兴趣,请在评论中告诉我。