【问题标题】:handsOnTable cell coloringhandsOnTable 单元格着色
【发布时间】:2013-01-09 22:08:40
【问题描述】:

我有一个 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”的单元格。假设代码在单元格 row 4/col 5 中找到文本“Hello World”,并将单元格 row 4/col 5 的背景颜色更改为 red

【问题讨论】:

  • 您希望它们根据什么标准着色,您如何使用handsOnTable()(无论如何,将我们链接到您正在使用的插件)?你是什​​么(代表/short, self-contained, example (SSCCE)?你能显示JS Fiddle demo 来重现你的问题,并显示你在做什么吗?
  • 让我看看能不能在 jsFiddle 上运行,谢谢

标签: jquery handsontable


【解决方案1】:

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

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

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

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

你就完成了。

【讨论】:

    【解决方案2】:
    1. 使用handsontable('getSelected')获取选定单元格的坐标

    2. 如果选择不为空:

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

      b.使用 handsontable("updateSettings") 和 cellProperties.renderer 更新表格:

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

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

    【讨论】:

      【解决方案3】:

      我正在使用的一种有点奇怪的方法,它实际上速度很快并且效果很好:

      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})
          }
        }
      }
      

      【讨论】:

        猜你喜欢
        • 2013-08-01
        • 2013-07-01
        • 2011-08-19
        • 2016-05-08
        • 1970-01-01
        • 2013-03-14
        • 2016-05-05
        • 1970-01-01
        相关资源
        最近更新 更多