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>

私は（AJAX呼び出しからの）オブジェクトデータと、より複雑な何かをしたいが、私は知りませんデータと書式設定で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()})); 

（あなたは私がテーブルの初期化した後、一度それを使用していることに注意します）。

---

コラム1回の繰り返し自体の価値場合は、列1と2をマージし、あなたの例では、データの構造に基づいて、その下に関数を参照してください：あなたは見つけることができます

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; 
} 

完全で実用的な例はthis JSFiddleです。 ` しかし、私は強く、変更したい場合は、より一般的な機能をコーディングすることをお勧め;：あなたが探している基本的にはどのような