将Handsontable下拉选项的source属性设置为相应的数据值

Question

我有一个从ajax调用中获取的数据数组

    data=[ // all are dynamic values can vary
        ['Alex', '16', ['2024-01-01,50000', '2024-03-01,20000', '2024-05-01,30000']],
        ['Bob', '21', ['2022-02-01,50000', '2022-03-01,10000']],
        ['Jack', '20', ['2023-03-01,50000', '2023-04-01,60000', '2023-05-01,50000']],
        ['John', '18', ['2020-04-01,20000', '2020-05-01,50000', '2020-06-01,30000', '2020-07-01,50000']],
    ];

我需要为第三列创建一个下拉列表，作为表示日期的数组，在基本 JavaScript 中每个下拉列表中的金额。

如果数据是静态的，这很容易，但由于它是由 ajax 调用生成的，我无法对下拉菜单的源属性进行硬编码

这是一个简单的 javascript Handsontable 初始化。

如有任何帮助，我们将不胜感激

我在源属性中调用了带有查询和回调参数的 getSource 函数，如下所示：

    function getSource(query, callback) {
        var selectedRow = hotInstance.getSelected()[0][0];
        var options = data[selectedRow][2];
        callback(options);
    }

这给了我一个问题，当我选择一个下拉项目时，它会更新下拉菜单 例如， 在上面的数据数组中，如果我打开第一行的下拉列表并选择任何随机选项（假设选项 2 即“2024-03-01,20000”）。该值选择正确。但当我再次打开相同的下拉列表时，下拉项目将 2024-03-01 作为第一个数据，将 20000 作为第二个数据，而不是“2024-01-01,50000”、“2024-03-01,20000”、“ 2024-05-01,30000' 这 3 个选项。

Answer 1

这样的东西对你有用吗？

const rel = document.querySelector('.result');
const ht = document.querySelector('.ht');
const API = 'https://randomuser.me/api/?results=10';
let hot, data;

data = [
  {
    "First name": "Emma",
    "Last name": "Garcia",
    "E-mail": "[email protected]",
    "Country": "United States"
  },
  {
    "First name": "Noah",
    "Last name": "Hernandez",
    "E-mail": "[email protected]",
    "Country": "Canada"
  },
  {
    "First name": "Olivia",
    "Last name": "Gomez",
    "E-mail": "[email protected]",
    "Country": "Mexico"
  }
]  

hot = new Handsontable(ht, {
    data,
    colHeaders: ['First name', 'Last name', 'E-mail', 'Country'],
  rowHeaders: true,
  colWidths: [100, 100, 200, 150],
  licenseKey: 'non-commercial-and-evaluation'
})

fetch(API)
.then(response => {
    if(response.ok){
    return response.json()
  }
})
.then(data => {
  let mydata = data.results.map( person => (
     person.name.first
  ))
  console.log(mydata)
  hot.updateSettings({
     cells: (row, col) => {
      let cp = {}
      if(col === 0){
        cp.type = 'dropdown';
        cp.source = mydata
      }
      return cp
    }
  })
})