-1
HoTヘッダーに追加したテキスト入力フィールドの検索用語の維持に問題があります。検索語を入力してスクロールダウンすると、この用語がクリアされることがよくあります。私はこれがスクロール時のHoTヘッダーフリーズ動作に関連していると思います。Handsontableヘッダー検索、入力テキストがスクロールで断続的に消去される
ステップいくつかのデータとのcolHeadersと
- のHoTコンテナを再現します。各/任意の列のHTMLヘッダーにHTML入力テキスト要素を含めます。
- 入力テキストボックスにテキストを入力します。
- データが消去されるまでページを下にスクロールします。効果が見られない場合は、ページをリロードし、動作が観察されるまで再試行してください。 クリアされるデータを観察するのに適切なスクロールを容易にするために、ページサイズを小さくする必要がある場合があります。
私は私の問題が関連すると考えている：私は指導に従っているが http://docs.handsontable.com/0.28.4/demo-custom-renderers.html ：
あなたは、行と列のヘッダーにHTMLをも置くことができます。 以下のチェックボックスのようにDOM要素にイベントを添付する必要がある場合は、 を覚えて、idではなくクラス名で要素を識別してください。これは、行 と列ヘッダーが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