handsontable沒有顯示任何表格的行？-有解無憂

我是handsontable的新手，我試過了，但在這里不起作用是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

雖然沒有結果，但我的意思是該表未填充 https://i.stack.imgur.com/3jlEC.png

uj5u.com熱心網友回復：

檢查您如何格式化二維資料。

此外，請確保您正確使用陣列索引。例如，這...

{ data: 1, type: "text" }

...將使用每個陣列中的第二個值，因為陣列是零索引的。

因此，例如，如果您希望您的表格顯示該'PACKAGE'值，那么您需要使用這個：

{ data: 0, type: "text" }

我清理了您問題中的資料，以確保它具有預期的結構：[ [...], [...], ... ];

（但我沒有調整任何陣列索引，如上所述）。

然后我使用了您的表格配置，沒有進行任何更改 - 它作業正常。

您可以單擊藍色的“運行代碼片段”按鈕查看結果。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/471090.html

標籤：jQuery 数据表手持式 rhandsontable

上一篇：jquerydatepicker的問題

下一篇：更改回圈中單個元素的樣式