【问题标题】:How to set properties for specific cells with handsontable in jQuery?如何在jQuery中使用handsontable为特定单元格设置属性?
【发布时间】:2013-08-19 03:35:15
【问题描述】:

我正在使用handsontable 处理一些东西,我想创建一个函数来真正添加soem 格式。具体来说,我希望有更改背景颜色和字体属性的选项。

我已经能够进入上下文菜单来添加一个按钮,以及获取所选单元格的坐标,但是我找不到在初始化调用 handsontable 之外设置格式选项的方法.

这是我一直在查看的文档,https://github.com/warpech/jquery-handsontable/wiki/Options#cell-options,我希望其他地方还有更多。

我没有要提供的代码,因为这是一个被锁定的项目,但我真的在研究如何为不在 init 上的单个单元格设置格式选项。

【问题讨论】:

    标签: javascript jquery spreadsheet handsontable


    【解决方案1】:

    这需要稍微挖掘一下文档,但我确实找到了...

    此示例将为所有选定的单元格赋予红色字体。

    callback: function (key, options) {
        var cell = $("#dataBlock'. $val['id'] .'").handsontable(\'getSelected\');
        var startRow = cell[0];
        var startCol = cell[1];
        var endRow = cell[2];
        var endCol = cell[3];
    
        if (key === "redFont") {
            setTimeout(function () {
                curRow = startRow;
                curCol = startCol;
                while(curRow <= endRow){
                    curCol = startCol;
                    while(curCol <= endCol){
                        check = $("#dataBlock'. $val['id'] .'").handsontable("getCell", curRow, curCol);
                        check.style.color = "red";
                        curCol += 1;
                    }
                    curRow += 1;
                }
            }, 100);
        }
    }
    

    【讨论】:

    • 谢谢,我正在寻找类似的功能。
    【解决方案2】:

    定义渲染函数

    function valueRenderer(instance, td, row, col, prop, value, cell) {
        if (row === 0 && col === 1) {
            $(td).css('color', 'green');
        }
    
        if (col > 3) {
            $(td).addClass('custom');
        }
    
        if (col === 5) {
            cellProperties.readOnly = true;
        }
    
        if (col > 3 && col < 10) {
            cellProperties.type = 'numeric';
        }
        ....
        ....
        so on...
    }
    

    然后在可操作的单元格选项中

     cells: function (row, col, prop) {
                    var cellProperties = {};
                    cellProperties.renderer = valueRenderer;
                    return cellProperties;
            }
    

    通过这种方式,您可以更改属性、应用类、动态更改颜色等。

    【讨论】:

    • 我无法使用cellProperties.type = 'numeric'; 将类型和来源应用于handontable 我做错了什么?我跟着你的技术。为渲染器。如果可以的话,我可以给我一个工作代码吗?
    【解决方案3】:

    如果你使用 jQuery,你可以使用标准的 addClass/removeClass 函数。

    我有一个页面全局 Handsontable 实例,我称之为“热”。 给定 rowNum 和 colNum:

            var cell = hot.getCell(rowNum,colNum);
            $(cell).addClass('yellow');
    

    【讨论】:

      【解决方案4】:

      我尝试了 jomofrodo 的解决方案,但它对我尝试使用类更改背景颜色不起作用 - 但它确实激发了一些确实有效的东西:

      var cell = handsOnTable_Conditions.getCell(x_coord,y_coord);
      $(cell).css('background-color','red');
      

      但是,与直接更改样式的解决方案相比,直接更改类可能具有灵活性优势。

      【讨论】:

        猜你喜欢
        • 2018-01-12
        • 2014-08-27
        • 1970-01-01
        • 2016-01-30
        • 2016-06-27
        • 1970-01-01
        • 2017-01-20
        • 1970-01-01
        • 2013-11-16
        相关资源
        最近更新 更多