Question

我正在尝试在Handsontable网格中使用“Handsontable”编辑器。我希望用户能够从“下拉列表”类型菜单中进行选择，但是会显示多列相关数据（用户正在选择ID号，我希望能够显示相关的名称和年龄，实例）。我有这个工作，但用户可以单击弹出编辑器中的/ any / cell，它将返回该单元格中的任何内容。在“ID”单元格上它工作得很好，但是当我只需要ID列中的值时，我可以轻松地返回“名称”或“年龄”。

关于如何强制返回值到/只/来自一列的任何想法？

http://jsfiddle.net/sq9xs5a7/

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

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

  var
    carData = getCarData(),
    container = document.getElementById('example1'),
    manufacturerData,
    colors,
    color,
    colorData = [],
    hot;

  manufacturerData = [
    {name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
    {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
    {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
    {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
    {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
    {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
  ];
  colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];

  while (color = colors.shift()) {
    colorData.push([
      [color]
    ]);
  }

  hot = new Handsontable(container, {
    data: carData,
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    columns: [
      {
        type: 'handsontable',
        handsontable: {
          colHeaders: ['Marque', 'Country', 'Parent company'],
          data: manufacturerData
        }
      },
      {type: 'numeric'},
      {
        type: 'handsontable',
        handsontable: {
          colHeaders: false,
          data: colorData
        }
      },
      {
        type: 'handsontable',
        handsontable: {
          colHeaders: false,
          data: colorData
        }
      }
    ]
  });

  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();

});

这是我正在做的一个很好的例子（从HoT帮助中拉出来）。在这里，它的工作方式与我的完全相同。当您单击“Car”字段时，您可以选择“Germany”，当我真的只需要第一列中的值时。

思想？

Answer 1

您可以将getValue（）方法添加到HOT-in-HOT中，如下所示......

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

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

  var
    carData = getCarData(),
    container = document.getElementById('example1'),
    manufacturerData,
    colors,
    color,
    colorData = [],
    hot;

  manufacturerData = [
    {name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
    {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
    {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
    {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
    {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
    {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
  ];
  colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];

  while (color = colors.shift()) {
    colorData.push([
      [color]
    ]);
  }

  hot = new Handsontable(container, {
    data: carData,
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    columns: [
      {
    type: 'handsontable',
    handsontable: {
      colHeaders: ['Marque', 'Country', 'Parent company'],
      data: manufacturerData,
      getValue: function() {
        var selection = this.getSelected();

        // Get always manufacture name of clicked row
        return this.getSourceDataAtRow(selection[0]).name;
      }
    }
      },
      {type: 'numeric'},
      {
    type: 'handsontable',
    handsontable: {
      colHeaders: false,
      data: colorData
    }
      },
      {
    type: 'handsontable',
    handsontable: {
      colHeaders: false,
      data: colorData
    }
      }
    ],

  });

});

使用Handsontable-in-handsontable，如何仅从一列返回值？

1 个答案: