handsOnTable细胞着色

时间:2013-01-25 21:04:41

标签: jquery handsontable

我有一个Handsontable表填充了数据并已经呈现

检查完细胞后,我找到了几个感兴趣的细胞,想要给它们上色 - 有没有一种方法可以使用Handsontable代码?

请注意,这是在加载并呈现表格之后

编辑:

该表格使用基本选项进行渲染:

$container.handsontable({
    startRows: 8,
    startCols: 6,
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    minSpareCols: 1,
    //contextMenu: false,
    cells: function (row, col, prop) {
    }
  });

数据通过Ajax加载,decode_file.php读取excel表并以JSON格式返回数据:

  $.ajax({
      url: "decode_file.php",
      type: 'GET',
      success: function (res) {
        handsontable.loadData(res.data);
        console.log('Data loaded');
      },
      error: function (res) {
        console.log("Error : " + res.code);
      }
    });

加载数据后,用户点击"处理"按钮和代码查找带有文本" Hello world"的单元格。让我们说代码找到文本" Hello World"在单元格第4行/第5列中,将单元格第4行/第5列的背景颜色更改为红色

3 个答案:

答案 0 :(得分:1)

主页为您的目的提供了一个很好的例子:

http://handsontable.com/demo/renderers.html

只需修改条件(在本例中为上/左角)。

cells: function (row, col, prop) {
  if (row === 0 && col === 0) {
    return {type: {renderer: greenRenderer}};
  }
}

你已经完成了。

答案 1 :(得分:0)

  1. 使用handontable('getSelected')

  2. 获取所选单元格的坐标
  3. 如果选择不为空:

    一个。循环所有单元格以使用handsontable('getCellMeta')和meta.renderer收集每个单元格的渲染器,然后将它们存储在一个数组中(这应该只执行一次)

    湾使用handsontable(“updateSettings”)和cellProperties.renderer:

    更新表
    • 对于所选坐标内的单元格,应用选定的渲染器并更新2.a中的渲染器名称。阵列

    • 对于所有其他单元格,应用存储的渲染器

答案 2 :(得分:0)

我正在使用一种有点奇怪的方法,它实际上很快并且工作正常:

afterRender: function(){
    render_color(this);
}

ht是handsontable的实例,而render_color:

function render_color(ht){
  for(var i=0;i<ht.countRows();i++){
    for(var p=0;p<ht.countCols();p++){
      cell_color = "#000";
      font_color = "#fff";
      $(ht.getCell(i,p)).css({"color": font_color, "background-color": cell_color})
    }
  }
}