Question

当使用包含许多行的下拉列表HandsOnTable时，我遇到了一些奇怪的行为。

第一次点击下拉列表时，并非所有行都显示。第二次单击它，它的工作原理。它在Chrome，IE，Safari和Firefox中为我做同样的事情。

您可以在JSFiddle中看到整个代码。

    $(document).ready(function () {

  function getCarData() {
    return [
      ["Nissan", 2009, "black", "black"],
      ["Nissan", 2006, "blue", "blue"],
      ["Chrysler", 2004, "yellow", "black"],
      ["Volvo", 2012, "white", "gray"]
    ];
  }

  $("#example1").handsontable({
    data: getCarData(),
    startRows: 7,
    startCols: 4,
    colHeaders: ["Car", "Year", "Chassis color", "TEST"],
    columns: [
      {},
      {type: 'numeric'},
      {
        type: 'dropdown',
        source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
      },
      {
        type: 'dropdown',
        source: ["Lots of data!", ... ...  "LAST LINE"
                ]
      }
    ]
  });


});

修改：与此同时，我使用Javascript以编程方式点击两次下拉列表。不是真正的解决方案，但它使用户无缝体验。

Answer 1

我建议使用自动填充类型

var lotOfData = JSON.parse($('<div/>').html($('#textAreaData').val()).text());

...

    type: 'autocomplete',
    source: lotOfData
}
...

< textarea id="textAreaData" >...< textarea >

HandsOnTable具有大量行的下拉列表

1 个答案: