在使用Chrome的内置搜索功能时，Handsontable并未完全呈现 [英] Handsontable is not fully rendered when using Chrome's built in search function

问题描述

使用Chrome的内置搜索功能时，我遇到了奇怪的，不一致的问题。我有大约250行数据可以在手机中呈现，超过可以在屏幕上显示，而无需滚动或缩小。

http://jsfiddle.net/hU6Kz/3723/

  var myData = [
 [，Kia，Nissan，Toyota，Honda]，
 [大量数据从这里开始]， 
]; 
 
 $（＃exampleGrid）。handsontable（{
 data：myData，
 startRows：5，
 startCols：5，
 minSpareCols：1 ，
 minSpareRows：1，
 rowHeaders：true，
 colHeaders：true，
 contextMenu：true 
}）; 
  

观察当您第一次拉起页面时，您可以向下滚动并且所有数据都呈现在该手机。

现在点击Ctrl + f即可启用Chrome内置的搜索功能。搜索手机表中的任何字符。大部分的数据都不再呈现！偶尔数据会再次被渲染，如果我搜索其他东西，但它似乎不一致，我找不到一个共同的原因。

这似乎不是在Firefox中的一个问题，但我的公司肯定是在Chrome阵营。这是因为Handsontable使用了一种称为虚拟渲染的奇妙技术，它只渲染您目前正在查看的行以及更多。它可以显示无限多行。 ctrl + f 的问题在于它会搜索HTML文本，因此您将无法使用它进行搜索。

这就是为什么有一个搜索插件可以返回给你一个所有匹配单元格的列表。从那里你可以做很多事情，比如输入 scrollTo 下一个可用的匹配单元格（搜索）。另一个非常着名的应用是通过重新创建具有较少数据的表（过滤器）来过滤行。

Weird, inconsistent problem I am running into when using Chrome's built in search function. I have some 250 lines of data to be rendered in a handsontable, more than can be displayed on your screen without scrolling or zooming out.

http://jsfiddle.net/hU6Kz/3723/

var myData = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["lots of data begins here"],
             ];

$("#exampleGrid").handsontable({
    data: myData,
    startRows: 5,
    startCols: 5,
    minSpareCols: 1,
    minSpareRows: 1,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
});

Observe that when you first pull up the page, you can scroll down and all the data is rendered in the handsontable.

Now hit control + f to pull up the Chrome's built in search function. Search for any character in the handsontable. Much of the data in the handsontable is no longer rendered! Occasionally the data will get rendered again if I search for something else, but it seems inconsistent and I can't find a common cause..

This does not seem to be a problem in firefox, but my company is decidedly in the Chrome camp. Help me, o wizards of the internet.

解决方案

This is because Handsontable uses a wonderful technique called "Virtual Rendering" which only renders the rows you are currently looking at plus a few more. It makes it possible to display "infinitely" many rows. The problem with ctrl+f is that it searches the HTML text so you won't be able to search using this.

This is why there is a search plugin available which returns to you a list of all matching cells. From there you can do many things like on enter, scrollTo the next available matching cell (search). Another very famous application is to filter rows by recreating the table with less data (filter).

这篇关于在使用Chrome的内置搜索功能时，Handsontable并未完全呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！