handsontable 没有显示任何 table 的行？

Question

我是 handson 的新手table 我试过了，但是这里的 js 配置不起作用。

new Handsontable(document.getElementById("test"), {
  data: table_data,
  height: 'auto',
  colWidths: [ 100, 100, 100, 100, 100, 100, 100, 100 ,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
  colHeaders: [
    "What",
    "Staff No",
    "Date",
    "Service",
    "Staff",
    "Qty",
    "Invoice",
    "Location",
    "Customer",
    "Customer Mob",
    "Incentive %",
    "Incentive Rate",
    "Tax %",
    "Tax",
    "Value Inc Tax",
    "Value W/O Tax",
    "Actual Sale Value inc tax",
    "Actual Sale Value W/O tax",
    "Incen_Bill_Inc_Tax",
    "Incen_Bill_w/o_Tax",
    "Incen_Actual_Inc_Tax",
    "Incen_Actual_w/o_Tax",
  ],
  columns: [
    { data: 1, type: "text" },
    { data: 2, type: "text" },   
    { data: 3, type: "date"},
    { data: 4, type: "text" },
    { data: 5, type: "numeric" },
    { data: 6, type: "text" },
    { data: 7, type: "text" },
    { data: 8, type: "text" },
    { data: 9, type: "text" },
    { data: 10, type: "text" },
    { data: 11, type: "text" },
    { data: 12, type: "text" },
    { data: 13, type: "text" },
    { data: 14, type: "text" },
    { data: 15, type: "text" },
    { data: 16, type: "text" },
    { data: 17, type: "text" },
    { data: 18, type: "text" },
    { data: 19, type: "text" },
    { data: 20, type: "text" },
    { data: 21, type: "text" },
    { data: 22, type: "text" },
    
    
  ],
//   dropdownMenu: true,
//   hiddenColumns: {
//     indicators: true
//   },
//   contextMenu: true,
//   multiColumnSorting: true,
//   filters: true,
//   rowHeaders: true,
//   manualRowMove: true,
//   afterGetColHeader: alignHeaders,
//   afterOnCellMouseDown: changeCheckboxCell,
//   beforeRenderer: addClassesToRows,
  licenseKey: "non-commercial-and-evaluation"
});

而 table_data 是这样的二维数组
https://i.stack.imgur.com/14Xtl.png 每个索引都是这样
https://i.stack.imgur.com/q5tzn.png

浏览器控制台没有显示任何错误 https://i.stack.imgur.com/B5Jxp.png

虽然没有结果，但我的意思是 table 未填充 https://i.stack.imgur.com/3jlEC.png

Answer 1

检查您如何设置二维数据的格式。

此外，请确保正确使用数组索引。比如这个...

{ data: 1, type: "text" }

...将使用每个数组的第二个值，因为数组是 zero-indexed.

因此，例如，如果您希望 table 显示 'PACKAGE' 值，则需要使用此：

{ data: 0, type: "text" }

我清理了你问题中的数据，以确保它具有预期的结构：[ [...], [...], ... ];

（但如上所述，我没有调整您的任何数组索引）。

然后我使用了您的 table 配置，没有做任何更改 - 它工作正常。

您可以点击蓝色的“运行代码片段”按钮查看结果。

var table_data = [ 
    ['PACKAGE', 1, '2022-04-30', 'OUTSTATION MAC BRIDAL MAKEUP', '2-Gomti Nagar', '1.0', 'JP-2223-0335', 'Jopling', 'Kajol Srivastava', '918887515895', '20', 20, 18, 3150, '20650.00', 17500, '20650.00', 17500, 4130, 3500, 4130, 3500], 
    ['PACKAGE', 1, '2022-04-29', 'OUTSTATION MAC PARTY MAKEUP', '3-Ashiyana', '1.0', 'JP-2223-0335', 'Jopling', 'Kajol Srivastava', '918887515895', '20', 20, 18, 3150, '20650.00', 17500, '20650.00', 17500, 4130, 3500, 4130, 3500], 
    ['POS', 1, '2022-03-01', 'NAILS REFILL-NAIL EXT. REMOVAL WITH MACHINE', 'Rohit Gautam', '1.0', 'AS-2122-0001', 'Ashiyana', 'Miss Srishti Jaiswal', '918318706610', '7', 7, 18, 102.51, '671.99', 569.49, '708.00', 600, 47, 40, 50, 42], 
    ['POS', 1, '2022-03-01', 'NAILS REFILL-NAIL EXT. REMOVAL WITH MACHINE', 'Rohit Gautam', '1.0', 'AS-2122-0002', 'Ashiyana', 'Miss Anisha', '919363214217', '7', 7, 18, 54, '354.00', 300, '708.00', 600, 25, 21, 50, 42], 
    ['POS', 1, '2022-03-01', 'HAIR COLOR-ROOT TOUCHUP WITH AMMONIA', 'Pavni Shukla', '1.0', 'AS-2122-0003', 'Ashiyana', 'Arti Sachdev', '919839485139', '7', 7, 18, 205.2, '1345.20', 1140, '1416.00', 1200, 94, 80, 99, 84] 
];

new Handsontable(document.getElementById("test"), {
  data: table_data,
  height: 'auto',
  colWidths: [ 100, 100, 100, 100, 100, 100, 100, 100 ,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
  colHeaders: [
    "What",
    "Staff No",
    "Date",
    "Service",
    "Staff",
    "Qty",
    "Invoice",
    "Location",
    "Customer",
    "Customer Mob",
    "Incentive %",
    "Incentive Rate",
    "Tax %",
    "Tax",
    "Value Inc Tax",
    "Value W/O Tax",
    "Actual Sale Value inc tax",
    "Actual Sale Value W/O tax",
    "Incen_Bill_Inc_Tax",
    "Incen_Bill_w/o_Tax",
    "Incen_Actual_Inc_Tax",
    "Incen_Actual_w/o_Tax",
  ],
  columns: [
    { data: 1, type: "text" },
    { data: 2, type: "text" },   
    { data: 3, type: "date"},
    { data: 4, type: "text" },
    { data: 5, type: "numeric" },
    { data: 6, type: "text" },
    { data: 7, type: "text" },
    { data: 8, type: "text" },
    { data: 9, type: "text" },
    { data: 10, type: "text" },
    { data: 11, type: "text" },
    { data: 12, type: "text" },
    { data: 13, type: "text" },
    { data: 14, type: "text" },
    { data: 15, type: "text" },
    { data: 16, type: "text" },
    { data: 17, type: "text" },
    { data: 18, type: "text" },
    { data: 19, type: "text" },
    { data: 20, type: "text" },
    { data: 21, type: "text" },
    { data: 22, type: "text" },
    
    
  ],
//   dropdownMenu: true,
//   hiddenColumns: {
//     indicators: true
//   },
//   contextMenu: true,
//   multiColumnSorting: true,
//   filters: true,
//   rowHeaders: true,
//   manualRowMove: true,
//   afterGetColHeader: alignHeaders,
//   afterOnCellMouseDown: changeCheckboxCell,
//   beforeRenderer: addClassesToRows,
  licenseKey: "non-commercial-and-evaluation"
});

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>

    <script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

</head>

<body>

    <div id="test"></div>

    <!-- JavaScript <script>...</script> goes here for a regular web page -->

</body>

</html>

handsontable 没有显示任何 table 的行？

handsontable not showing any table's row?

datatable

jquery

handsontable

rhandsontable