可处理的无限滚动追加数据和应用合并单元格格式

Handsontable Infinite Scroll Append Data and apply Merge Cells Formatting

本文关键字：应用 合并 单元格 格式 数据 无限 滚动 追加 可处理      更新时间：2023-09-26

我正在使用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>

提前感谢!

正如我在评论中提到的，如果你想在滚动时更新表的设置(参考:更新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;
}

您可以在这个JSFiddle中找到完整的工作示例。

相关文章：