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*/ 
    ] 
});