如何只在手柄中的少数列上加载数据，以及单元格中下拉列表值的变化？

Question

我有一个带有少量columns.Where的手柄表，其中一个列有下拉值。在改变下拉值时，我希望根据下拉选择加载下两列。我将获得所选下拉值的JSON数组数据。如何为这两列推送JSON数组数据？

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      ["Nissan", 2012, "black"],
      ["Nissan", 2013, "blue"],
      ["Chrysler", 2014, "yellow"],
      ["Volvo", 2015, "white"]
    ];
  }

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color',"Body Colour"],
    columns: [
      {},
      {type: 'numeric'},
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      },
      {
        type: 'text'

      },
       {
        type: 'text'

      }
    ]
  });

  function bindDumpButton() {
      if (typeof Handsontable === "undefined") {
        return;
      }

      Handsontable.Dom.addEvent(document.body, 'click', function (e) {

        var element = e.target || e.srcElement;

        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();

});

这是JSfiddle链接

http://jsfiddle.net/6dzrpdzu/2/

Answer 1

我认为您正在寻找将afterchange事件附加到您的“手柄表”以获取下拉选择事件。请看一下最新的小提琴：

http://jsfiddle.net/6dzrpdzu/5/

hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color',"Body Colour"],
    columns: [
      {},
      {type: 'numeric'},
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      },
      {
        type: 'text'

      },
       {
        type: 'text'

      }
    ],
    afterChange: onChange
  });

function onChange(changes, source) {
        if (!changes) {
            return;
        }
        var instance = this;
        var row = -1;
        var col = -1;
        var newValue = "";
        changes.forEach(function (change) {
            row = change[0];
            col = change[1];
            newValue = change[3];
        });
        if(col == 2){
            instance.setDataAtCell(row, col+1, getCarData()[row][2]);
          instance.setDataAtCell(row, col+2, getCarData()[row][2]);
         }

  }