javascript - 如何使用 Handsontable 根据另一个自动完成单元格更新单元格

Question

我已经有了完整的代码来返回自动完成数据并根据此自动完成填充另一个单元格 但我想让它从ajax请求到数据库查询都是动态的。 如何做到这一点？

http://jsfiddle.net/wvXvJ/15/

$(document).ready(function() {

        var $container  = $("#mytables");
        var comsources  = ["Chrysler", "Nissan", "Suzuki", "Toyota"];

        var ac = [
            {"name":"Chrysler","label":"Pepsi Cola Hat","price":"24","abbrev":"CRY"},
            {"name":"Nissan","label":"Candle Lights Dinner","price":"780","abbrev":"NSS"},
            {"name":"Suzuki","label":"Pork Meat Ball","price":"178","abbrev":"SZK"},
            {"name":"Toyota","label":"Granny Health Supplement","price":"24","abbrev":"TYT"}
        ];

        var ht = $container.handsontable({
            startRows: 1,
            startCols: 5,
            rowHeaders: true,
            colHeaders: ['Item Name', 'Price', 'Code'],
            minSpareRows: 1,
            contextMenu: true,
            columns: [
                {
                    data: "name",
                    type: 'autocomplete',
                    source: comsources,
                    strict: false
                },
                {
                    data: "price"
                },
                { 
                    data: "code"
                }
            ],
            afterChange : function(arr, op) {
                if(op=="edit"&&arr.length==1) {
                    var value = arr[0][3];
                    for(var i=0;i<ac.length;i++) {
                        if(ac[i].name == value) {
                            $container.handsontable("setDataAtCell", arr[0][0], 1, ac[i].price);
                            $container.handsontable("setDataAtCell", arr[0][0], 2, ac[i].abbrev);
                            return false;
                        }
                    }
                }
            }
        });
    });

Answer 1

他们在 documentation 中准确定义了如何做到这一点:

$("#example3").handsontable({
  data: getCarData(),
  startRows: 7,
  startCols: 4,
  colHeaders: ["Car", "Year", "Chassis color", "Bumper color"],
  columns: [
    {
      type: 'autocomplete',
      source: function (query, process) {
        $.ajax({
          //url: 'php/cars.php', //commented out because our website is hosted on static GitHub Pages
          url: 'json/autocomplete.json',
          dataType: 'json',
          data: {
            query: query
          },
          success: function (response) {
              console.log("response", response);
              //process(JSON.parse(response.data)); //JSON.parse takes string as a argument
              process(response.data);

          }
        });
      },
      strict: true
    },
    {} /*Year is a default text column*/,
    {} /*Chassis color is a default text column*/,
    {} /*Bumper color is a default text column*/
  ]
});