javascript - 连接两个 Handsontable

Question

我正在尝试链接两个 Handsontable，以便第二个表显示第一个表中当前列的其他详细信息。第一个表的列标题中的数字将用于查找第二个表中的相应行。

单击第一个表中的任何单元格都会导致第二个表中的相应行突出显示。

单击第二个表应突出显示该行并将第一个表中的光标移动到相应的列。

这是 HTML:

<div id="main" class="handsontable"></div>
<p>
<div id="index" class="handsontable"></div>

这是显示表格的 Javascript:

$(document).ready(function () {

function getMainData() {
    return [["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13]];
}

function getMainHeaders() {
    return ["Year", 1, 2, 3, 4];
}

function getIndexData() {
    return [[1, "Kia", "Korea"], [2, "Nissan", "Japan"], [3, "Toyota", "Japan"], [4, "Honda", "Japan"]];
}

function getIndexHeaders() {
    return ["#", "Make", "Country"];
}

$("#main").handsontable({
    data: getMainData(),
    colHeaders: getMainHeaders(),
    fillHandle: false,
    readOnly: true
});

$("#index").handsontable({
    data: getIndexData(),
    colHeaders: getIndexHeaders(),
    fillHandle: false,
    readOnly: true        
});

});

我所需要的只是链接表格的代码!我一直在兜圈子试图让这项工作成功，但没有快乐。

我已经在 fiddle 中获得了以上所有内容。 .

预先感谢您的任何帮助或建议。

Answer 1

我设法做到了你所要求的(fiddle) 。我在表启动后添加了此代码:

var sync = function(tab1, tab2) {
    var syncSelection = function(row, col, rowEnd, colEnd) {
        var sel1 = tab1.getSelected();
        var sel2 = tab2.getSelected();
        if (!sel2) {
            tab2.selectCell(row, col, rowEnd, colEnd);
            return;
        }
        for (var key in sel1) {
            if (sel1[key] !== sel2[key]) {
                tab2.selectCell(row, col, rowEnd, colEnd);
                return;
            }
        }
    };

    // syncs while selecting (does not work for selecting one cell)
    tab1.addHook('afterSelection', syncSelection);
    // needed to sync selection of one cell
    tab1.addHook('afterSelectionEnd', syncSelection);
};


var mainTable = $('#main').handsontable('getInstance');
var indexTable = $('#index').handsontable('getInstance');

sync(mainTable, indexTable);
sync(indexTable, mainTable);