Handsontable is not fully rendered when using Chro

问题:

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.

回答1:

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).

回答2:

Here there is a working demo using the search feature of handsontable.

In the search input write Test and then hit Enter.

This is the method that does what I described above.

var searchField = document.getElementById('search_field');

Handsontable.Dom.addEvent(searchField, 'keyup', function (event) {
  if (event.keyCode == 13) {
    var queryResult = hot.search.query(this.value);
    hot.selectCell(queryResult[0].row, queryResult[0].col);
  }
});

http://jsfiddle.net/pdivasto/hp8ge8kk/