-1
HoT 헤더에 추가 한 텍스트 입력 필드에서 검색어를 유지 관리하는 데 문제가 있습니다. 검색어를 입력하고 스크롤하면이 용어가 지워질 수 있습니다. 나는 이것이 스크롤시 HoT 헤더 고정 동작과 관련이 있다고 생각합니다.Handsontable 헤더 검색, 입력 텍스트가 스크롤시 간헐적으로 지워짐
단계는 일부 데이터와 함께 colHeaders
- 뜨거운 용기를 재생한다. 각/모든 열에 대해 colHeaders에 HTML 입력 텍스트 요소를 포함하십시오.
- 입력 텍스트 상자에 텍스트를 입력하십시오.
- 데이터가 지워질 때까지 페이지를 아래로 스크롤하십시오. 효과가 나타나지 않으면 페이지를 다시로드하고 동작이 관찰 될 때까지 다시 시도하십시오. 데이터를 지우는 데 필요한 적절한 스크롤을 용이하게하기 위해 페이지 크기를 줄여야 할 수도 있습니다. 또한 행과 열 헤더에 HTML 넣을 수 있습니다
: http://docs.handsontable.com/0.28.4/demo-custom-renderers.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