Question

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

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

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

这是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);

链接两个Handsontables

1 个答案: