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/

选择整个Handsontable列并单击图标？

1 个答案: