如何使用 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*/
  ]
});