单击图标选择整个 Handsontable 列？

Question

我希望表格中的每一列都有一个图标，单击该图标将选择整个列。我有这个用于第一个（非固定）列的按钮，但无法让每个图标工作。另外，知道为什么最后一列（2018）的宽度更大并且水平滚动似乎永远不会到达终点吗？提前致谢。

jQuery

container.handsontable("loadData", getData());

$("button#selectFirst").on('click', function () {
    //container.handsontable("selectCell", 0, 4)
    container.handsontable("selectCell", 0, 4, 5, 4)
});

http://jsfiddle.net/D4Kx3/5/

Answer 1

你需要像这样为箭头添加一个自定义渲染器

var myRendererArrow = function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.cellTypes.checkbox.renderer.apply(this, arguments);
    $(td).empty().append("<span class='sm-moon delBlue icon-right-arrow-17' data-icon='&#xe795;'>O</span>");
    return td;
};      

在 afterRender 回调中你需要添加这段代码

afterRender:function(){
    $('input[type=checkbox]').uniform(); 
    $('.checkall').on('click', function () {
        $(this).closest('table').find('input.htCheckboxRendererInput').prop("checked",this.checked);
        $.uniform.update();//update UniformJS
    });
//select clicked column
$(".icon-down-arrow-17").on("click",function(){
    var col=$(this).closest("th").index();
    container.handsontable("selectCell", 0, col, 5, col);
}); 
//select row only change th for tr and the column on selectCell
$(".icon-right-arrow-17").on("click",function(){
    var row=$(this).closest("tr").index();
    container.handsontable("selectCell", row, 0, row, 13,false);//false prevent scroll
});                  
}    

如果值已更改，则仅更改背景颜色，您可以在 afterChange 中使用更改对象

$('#example1').handsontable('getInstance').addHook('afterChange', function(changes) {
    var ele=this;
    $.each(changes, function (index, element) {
        if(element[2]!=element[3]){    //if the original value is not equal to the actual 
               $(ele.getCell(element[0],ele.propToCol(element[1])))
                    .addClass('changeInput').data("change",true);
        }
    });
});    

http://jsfiddle.net/D4Kx3/10/