Handsontable Header 搜索，输入文本，滚动时断断续续地被清除

Question

我在添加到 HoT header 的文本输入字段中维护搜索词时遇到问题。如果我输入一个搜索词并向下滚动，这个词通常会被清除。我认为这可能与 HoT header 滚动时的冻结行为有关。

重现步骤

带有一些数据和 colHeaders 的 HoT 容器。在 each/any 列
在输入文本框中输入一些文字
向下滚动页面直到数据被清除。如果看不到效果，请重新加载页面并重试，直到观察到行为为止。请注意，您可能需要减小页面大小，以便充分滚动以观察正在清除的数据。

我认为我的问题与： http://docs.handsontable.com/0.28.4/demo-custom-renderers.html 但是我遵循了指导：

You can also put HTML into row and column headers. If you need to attach events to DOM elements like the checkbox below, just remember to identify the element by class name, not by id. This is because row and column headers are duplicated in the DOM tree and id attribute must be unique.

我一直按照建议引用 class 的搜索框，并且我调整了我的代码以期望搜索框出现多次。

$(document).ready(function () {
  var colHeaders = [
  'ID</br><input name="id" type="text" class="searchID" size="1">',
  'Name</br><input name="name" type="text" class="searchName" size="20">',
  'Address</br><input name="address" type="text" class="searchAddress" size="10">'
  ];
  var data = [
    {id: 1, name: 'Ted Right', address: 'A'},
    {id: 2, name: 'Frank Honest', address: 'B'},
    {id: 3, name: 'Joan Well', address: 'C'},
    {id: 4, name: 'Gail Polite', address: 'D'},
    {id: 5, name: 'Michael Fair', address: 'E'},
    {id: 6, name: 'Ted Right2', address: 'A'},
    {id: 7, name: 'Frank Honest2', address: 'B'},
    {id: 8, name: 'Joan Well2', address: 'C'},
    {id: 9, name: 'Gail Polite2', address: 'D'},
    {id: 10, name: 'Michael Fair2', address: 'E'},
    {id: 11, name: 'Ted Right3', address: 'A'},
    {id: 12, name: 'Frank Honest3', address: 'B'},
    {id: 13, name: 'Joan Well3', address: 'C'},
    {id: 14, name: 'Gail Polite3', address: 'D'},
    {id: 15, name: 'Michael Fair3', address: 'E'},
    {id: 16, name: 'Ted Right4', address: 'A'},
    {id: 17, name: 'Frank Honest4', address: 'B'},
    {id: 18, name: 'Joan Well4', address: 'C'},
    {id: 19, name: 'Gail Polite4', address: 'D'},
    {id: 20, name: 'Michael Fair4', address: 'E'},
    {id: 21, name: 'Ted Right3', address: 'A'},
    {id: 22, name: 'Frank Honest3', address: 'B'},
    {id: 23, name: 'Joan Well3', address: 'C'},
    {id: 24, name: 'Gail Polite3', address: 'D'},
    {id: 25, name: 'Michael Fair3', address: 'E'},
    {id: 26, name: 'Ted Right4', address: 'A'},
    {id: 27, name: 'Frank Honest4', address: 'B'},
    {id: 28, name: 'Joan Well4', address: 'C'},
    {id: 29, name: 'Gail Polite4', address: 'D'},
    {id: 30, name: 'Michael Fair4', address: 'E'},
  ];
  var $container = $("#HoT");
  var searchParams = '';
  var searchObj = {};
  searchObj[0] = {key: 'searchID', className: '.searchID', saved: null};
  searchObj[1] = {key: 'searchName', className: '.searchName', saved: null};
  searchObj[2] = {key: 'searchAddress', className: '.searchAddress', saved: null};

  $container.handsontable({
      data: data,
      colHeaders: colHeaders,
      contextMenu: false,
  });
  
  //loadSavedSearchTerms();
  searchHandlers();
  
  function searchHandlers(){
    for(i=0; i < 3; ++i){
      $(document).on('keydown', searchObj[i].className, function(e){ 
        if(e.which === 13) { // Return Pressed 
          fetchSearchParams();
        }
      });
    }
  }
  /*
  function loadSavedSearchTerms(){
    for(i=0; i < 3; ++i){
      if(searchObj[i].saved){ // If a search component previously stored
        $(searchObj[i].className).each(function(j, obj){
          obj.value = searchObj[i].saved;
        });
      }  
    }
  }
  */
  function fetchSearchParams(){
    searchParams = '';
    // Fetch values from all input fields 
    // Note immensely more complicated due to HoT beaviour causing duplications in DOM
    for(i=0; i < 3; ++i){
      //Due to duplication by HoT return array of values for each input
      searchObj[i].arrayHoT = $(searchObj[i].className).map(function() {
        return this.value;
      }).get();
      
      //Save any terms for this input for future use e.g. sort/scroll ajax call (not included here)
      if(searchObj[i].arrayHoT[0]) 
        searchObj[i].saved = searchObj[i].arrayHoT[0];
      else if(searchObj[i].arrayHoT[1])
        searchObj[i].saved = searchObj[i].arrayHoT[1];

      if(searchObj[i].saved){
        searchParams += '&'+searchObj[i].key+'='+searchObj[i].saved;
      }
    }
    console.log('Final Search params: '+searchParams);
    // Filter Data - AJAX Call with params
    //return getData(searchParams).done(loadHOT);
  }
});

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="http://docs.handsontable.com/scripts/jquery.min.js"></script> <script src="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="http://docs.handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">

<h2>Search Values - Maintain on scroll</h2>
<div id="HoT" class="handsontable"></div>

关于如何维护输入的搜索值有任何suggestions/ideas吗？

注意：我已将此作为问题提交： HoT Issue - Frozen Header, Input Element Data is Lost on Scroll

Answer 1

我描述的问题已被确认为错误。

来自 Handsontable 的 AMBudnik：

When we add renderAllRows: true the issue stops so I guess that this has something to do with the viewport.

请参阅Handsontable Github了解任何更新

Handsontable Header 搜索，输入文本，滚动时断断续续地被清除

Handsontable Header Search, Input Text, is Cleared Intermittently on Scroll

javascript

jquery

handsontable