-1
我遇到了在添加到HoT標題的文本輸入字段中維護搜索項的問題。如果我輸入一個搜索詞並向下滾動，這個詞通常會被清除。我認爲這可能與滾動時的HoT頭部凍結行爲有關。Handsontable標題搜索輸入文本在滾動中間歇性地清除
步驟來重現
- 的HoT容器與一些數據和colHeaders。在每個/任何列的colHeaders中包含HTML輸入文本元素
- 在輸入文本框中輸入一些文本
- 向下滾動頁面直到數據被清除。如果沒有看到效果，請重新加載頁面並重試，直到觀察到行爲。 請注意，您可能需要減小頁面大小以便於進行足夠的滾動以觀察正在清除的數據。
我相信我的問題涉及到： http://docs.handsontable.com/0.28.4/demo-custom-renderers.html 不過，我也跟着指導：
你也可以把HTML到行和列標題。如果您需要 將事件附加到DOM元素（如下面的複選框），請記住 以按類名標識元素，而不是按標識。這是因爲行 和列標題在DOM樹中重複，並且id屬性 必須是唯一的。
我一直在按照建議引用搜索框，我調整了我的代碼，期望多次出現搜索框。
$(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>就如何維護搜索值的任何建議/想法進入？
注：因爲我已經提交了這個作爲一個問題： HoT Issue - Frozen Header, Input Element Data is Lost on Scroll