Handsontable 무한 스크롤 데이터 추가 및 병합 셀 서식 지정

Question

저는 handsontable로 작업 중이며 무한 스크롤을 사용하여 데이터를 추가하려고합니다. 그러나 내가 검색 한, 내가 나를 데이터를 추가 할 수 있도록 해주는 handsontable 방법을 찾을 것으로 예상 Array.prototype.push.apply

및 검색 : 내가 사용하는 간단한 예제를 통해이를 달성 할 수 아무것도 발견하지 못했습니다. 아마 나는 뭔가를 놓친다. 그렇다면 나는 당신이 제공 할 수있는 어떤 방향에 대해서 정말로 고맙게 생각한다. 여기

내 간단한 무한 스크롤 예입니다 :

$(document).ready(function() { 
 
    var data = [ 
 
    ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"], 
 
    ["2000", 0, 2941, 4303, 354, 5814], 
 
    ["2001", 5, 2905, 2867, 412, 5284], 
 
    ["2002", 0, 2941, 4303, 354, 5814], 
 
    ["2003", 5, 2905, 2867, 412, 5284], 
 
    ["2004", 4, 2517, 4822, 552, 6127], 
 
    ["2005", 0, 2941, 4303, 354, 5814], 
 
    ["2006", 5, 2905, 2867, 412, 5284], 
 
    ["2007", 4, 2517, 4822, 552, 6127], 
 
    ["2008", 0, 2941, 4303, 354, 5814], 
 
    ["2009", 5, 2905, 2867, 412, 5284], 
 
    ["2010", 4, 2517, 4822, 552, 6127], 
 
    ["2011", 2, 2422, 5399, 776, 4151], 
 
    ["2012", 0, 2941, 4303, 354, 5814], 
 
    ["2013", 5, 2905, 2867, 412, 5284], 
 
    ["2014", 4, 2517, 4822, 552, 6127], 
 
    ["2015", 2, 2422, 5399, 776, 4151], 
 
    ]; 
 
    var moreData = [ 
 
    ["2016", 10, 11, 12, 13, 14], 
 
    ["2017", 20, 11, 14, 14, 10], 
 
    ["2018", 30, 15, 12, 13, 25], 
 
    ["2019", 20, 11, 14, 14, 10], 
 
    ["2020", 30, 15, 12, 13, 25] 
 
    ]; 
 
    var $container2 = $("#HoT2"); 
 

 
    $container2.handsontable({ 
 
     data: data, 
 
     colHeaders: true, 
 
     contextMenu: true, 
 
    }); 
 
    
 
    $(window).scroll(function() { 
 
    if($(document).height() <= $(window).scrollTop() + $(window).height()) { 
 
     appendHOT2(); 
 
    } 
 
    }); 
 

 
    function appendHOT2() { 
 
// rowCount = $container2.handsontable('countRows'); console.log("Row Count: "+rowCount); 
 
// $container2.handsontable('alter', 'insert_row', rowCount, 3); // Add set number of empty rows 
 

 
    var hotData = $container2.handsontable('getData'); 
 
    Array.prototype.push.apply(hotData, moreData); 
 
    console.log("Array: "+ hotData); 
 
    $container2.handsontable('loadData', hotData); //Replaces current data doesn't append 
 
    } 
 
});

</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>Infinite Scroll - Simple Load More Rows</h2> 
 
<div id="HoT2" class="handsontable"></div>

내가 뭔가를 (아약스 호출에서) 오브젝트 데이터와 더 복잡한 작업을 수행 할 현실에서

만에게 나도 몰라 데이터와 포맷으로 handsontable을 업데이트하는 방법.

여기까지 내가 찍은 나의 예입니다 :

$(document).ready(function() { 
 
    var colHeaders = [ 
 
    'ID','Name','Address' 
 
    ]; 
 
    var mergeCells = [ 
 
    {row:0, col:0, rowspan:2, colspan:1}, 
 
    {row:0, col:1, rowspan:2, colspan:1}, 
 
    {row:0, col:2, rowspan:1, colspan:1}, 
 
    {row:2, col:0, rowspan:1, colspan:1}, 
 
    {row:2, col:1, rowspan:1, colspan:1}, 
 
    {row:2, col:2, rowspan:1, colspan:1}, 
 
    {row:3, col:0, rowspan:1, colspan:1}, 
 
    {row:3, col:1, rowspan:1, colspan:1}, 
 
    {row:3, col:2, rowspan:1, colspan:1}, 
 
    {row:4, col:0, rowspan:2, colspan:1}, 
 
    {row:4, col:1, rowspan:2, colspan:1}, 
 
    {row:4, col:2, rowspan:1, colspan:1}, 
 
    {row:5, col:0, rowspan:1, colspan:1}, 
 
    {row:5, col:1, rowspan:1, colspan:1}, 
 
    {row:5, col:2, rowspan:1, colspan:1}, 
 
    {row:6, col:0, rowspan:1, colspan:1}, 
 
    {row:6, col:1, rowspan:1, colspan:1}, 
 
    {row:6, col:2, rowspan:1, colspan:1}, 
 
    ]; 
 
    var data = [ 
 
    {id: 1, name: 'Ted Right', address: 'A1'}, 
 
    {id: 1, name: 'Ted Right', address: 'A2'}, 
 
    {id: 2, name: 'Frank Honest', address: 'B'}, 
 
    {id: 3, name: 'Joan Well', address: 'C'}, 
 
    {id: 4, name: 'Gail Polite', address: 'D1'}, 
 
    {id: 4, name: 'Gail Polite', address: 'D2'}, 
 
    {id: 5, name: 'Michael Fair', address: 'E'}, 
 
    ]; 
 
    var moreData = [ 
 
     {id: 6, name: 'Ted 2Right', address: 'F'}, 
 
     {id: 7, name: 'Frank 2Honest', address: 'G1'}, 
 
     {id: 7, name: 'Frank 2Honest', address: 'G2'}, 
 
     {id: 8, name: 'Joan 2Well', address: 'H'}, 
 
     {id: 9, name: 'Gail 2Polite', address: 'I1'}, 
 
     {id: 9, name: 'Gail 2Polite', address: 'I2'}, 
 
     {id: 9, name: 'Gail 2Polite', address: 'I3'}, 
 
     {id: 10, name: 'Michael 2Fair', address: 'J'}, 
 
    ]; 
 
    var moreMergeCells = [ 
 
    {row:7, col:0, rowspan:1, colspan:1}, 
 
    {row:7, col:1, rowspan:1, colspan:1}, 
 
    {row:7, col:2, rowspan:1, colspan:1}, 
 
    {row:8, col:0, rowspan:2, colspan:1}, 
 
    {row:8, col:1, rowspan:2, colspan:1}, 
 
    {row:8, col:2, rowspan:1, colspan:1}, 
 
    {row:9, col:0, rowspan:1, colspan:1}, 
 
    {row:9, col:1, rowspan:1, colspan:1}, 
 
    {row:9, col:2, rowspan:1, colspan:1}, 
 
    {row:10, col:0, rowspan:3, colspan:1}, 
 
    {row:10, col:1, rowspan:3, colspan:1}, 
 
    {row:10, col:2, rowspan:1, colspan:1}, 
 
    {row:11, col:0, rowspan:1, colspan:1}, 
 
    {row:11, col:1, rowspan:1, colspan:1}, 
 
    {row:11, col:2, rowspan:1, colspan:1}, 
 
    ]; 
 
    var $container = $("#HoT2"); 
 

 
    $container.handsontable({ 
 
     data: data, 
 
     colHeaders: colHeaders, 
 
     mergeCells: mergeCells, 
 
     contextMenu: false, 
 
    }); 
 
    
 
    $(window).scroll(function() { 
 
    if($(document).height() <= $(window).scrollTop() + $(window).height()) { 
 
     appendHOT2(); 
 
    } 
 
    }); 
 

 
    function appendHOT2() { 
 
    console.log("Append Data and MergeCells..."); 
 
    
 
// Append moreData and moreMergeCells data to the handsontable display 
 
// How can this be achieved? 
 
    } 
 
});

</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>Infinite Scroll - Load More Formatted Rows</h2> 
 
<div id="HoT2" class="handsontable"></div>

사전에 감사!

Answer 1

내 의견에서 언급했듯이 스크롤 할 때 (참조 : mergeCells 설정을 업데이트 할 때) 테이블의 설정을 업데이트하려는 경우 좀 더 일반적인 기능은 IMO입니다. 필수 ... 적어도 훨씬 간단합니다 :)

이

$container.handsontable('updateSettings', ({mergeCells: merge()})); 

(당신은 내가 테이블의 초기화 후 한 번 사용하는 것을주의 할 것이다) :

이 줄

당신이 스크롤 할 때마다해야 할 일이다.

function merge() { 
    var mergeCells=[], rowspan=1, tempName = ''; 

    for(var i=0; i<$container.handsontable('getData').length;i++) { 
    if ($container.handsontable('getDataAtCell', i,1) === tempName) { 
     rowspan+=1; 
    } 
    else { 
     mergeCells.push({row:i-rowspan, col:0, rowspan:rowspan, colspan:1}) 
     mergeCells.push({row:i-rowspan, col:1, rowspan:rowspan, colspan:1}) 
     rowspan=1 
    } 
    tempName = $container.handsontable('getDataAtCell', i,1); 
    } 
    return mergeCells; 
} 

당신은 찾을 수 있습니다

---

는 1 열 반복 자체의 값이 경우 열 1과 2를 병합, 귀하의 예제에서 데이터의 구조를 기반으로 아래의 기능을 참조하십시오 완료 및 작동 예제는 this JSFiddle입니다.