Handsontable渲染完成后如何突出显示单元格

时间:2019-05-21 06:55:47

标签: handsontable

我希望在Handsontable加载完成后突出显示特定的列/行。我有一组用于突出显示单元格的索引。

hot.selectCells([startRowIndex,statrColumnIndex,endRowIndex,endColumnIndex]);

在Handsontable中没有任何mergeCells的情况下,它可以完美地工作,但是一旦在表中添加了mergeCells,列/行的突出显示就无法正常工作。

1 个答案:

答案 0 :(得分:0)

jExcel是兼容的javascript电子表格,并且非常兼容。要在渲染后创建选区,可以使用以下代码来完成。

更多示例:https://bossanova.uk/jexcel

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jdropdown.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jdropdown.min.css" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/excel-formula.min.js"></script>

<div id="my"></div>

<script>
data1 = [
    ['US', 'Cheese', 'Yes', '2019-02-12'],
    ['CA;US;UK', 'Apples', 'Yes', '2019-03-01'],
    ['CA;BR', 'Carrots', 'No', '2018-11-10'],
    ['BR', 'Oranges', 'Yes', '2019-01-12'],
];

$('#my1').jexcel({
    data:data1,
    colHeaders: [ 'Product Origin','Description', 'Stock', 'Best before' ],
    colWidths: [ 300, 200, 100, 100 ],
    columns: [
        { type: 'dropdown', url:'/jexcel/countries', autocomplete:true, multiple:true }, // Remote source for your dropdown
        { type: 'text' },
        { type: 'dropdown', source:['No','Yes'] },
        { type: 'calendar' },
    ],
    onload:function() {
        var column1 = $('#my1').find('#0-0'); // Search for A1
        var column2 = $('#my1').find('#2-2'); // Search for C3

        $('#my1').jexcel('updateSelection', column1, column2);
    }
});
</script>
</html>