渲染器之后的JQuery handontable使单元格与其他单元格值相关 - 不起作用

时间:2016-11-03 05:37:10

标签: jquery cell readonly handsontable renderer

我有handsontable,其中包含以下数据。

var data = [
    ["2008", 10, 11, 12, 1],
    ["2009", 20, 11, 14, 0],
    ["2010", 30, 15, 12, 1]
  ];

链接:FIDDLE

如果值为0,我需要在最后一列中假设我需要包含行的第二列和第三列的相应列make readonly。

请注意以下图片以获取更多详细信息:

enter image description here

Handontable Renderer方法是需要使用的。我用的是:

Handsontable.hooks.add('afterRender', function () {
var a = $('.htCore').find('tbody tr td:nth-child(2)');
var b = $('.htCore').find('tbody tr td:nth-child(3)');
var g = $('.htCore').find('tbody tr td:nth-child(4)'); 

g.each(function (i, v) { 
if (parseFloat(g.eq(i).text()) == 0)) {
   a.eq(i).attr('readonly',true);
   b.eq(i).attr('readonly',true);
 });

但不工作请指导我......

3 个答案:

答案 0 :(得分:1)

您不需要使用JQuery来更新readOnly属性。

您需要创建一个像我的例子一样的单元格属性:

http://jsfiddle.net/vgaybtvp/

cells: function (row, col, prop) {
    var cellProperties = {};
    var hot = this.instance;

    if((col == 2 || col == 3) && hot.getDataAtCell(row, hot.colToProp(4)) == 0) {
        cellProperties.readOnly = true;
    } else {
        cellProperties.readOnly = false;
    }

    return cellProperties;
}

此致

答案 1 :(得分:1)

您可以使用的是只读已包含在Handsontable中的属性。 请参阅下面初始化表时调用的函数,以及更改后的函数:

function updateTableReadOnly() {
  var cellPropertiesID;
  for (var i = 0; i < $("#example1grid").handsontable('getData').length; i++) {
    if ($("#example1grid").handsontable('getData')[i][4] === '0') {
      updateCellReadOnly(i,2,true)
      updateCellReadOnly(i,3,true)
    } else {
      updateCellReadOnly(i,2,false)
      updateCellReadOnly(i,3,false)
    }
  }
  $("#example1grid").handsontable('render');
}

function updateCellReadOnly(i,j,value) {
  cellPropertiesID = $("#example1grid").handsontable('getCellMeta',i,j);
  cellPropertiesID.readOnly = value;
}

请参阅your fiddle updated了解我的工作示例。

请注意,我修改了您的数据以使用字符串值检查您的情况。

var data = [
  ["2008", "10", "11", "12", "1"],
  ["2009", "20", "11", "14", "0"],
  ["2010", "30", "15", "12", "1"]
],

原因是如果您需要直接在表格中更改数据,您输入的新值将是字符串。这样,列 Nissan Toyota 将根据值 Honda 动态更改属性。我想你想在这里实现。

答案 2 :(得分:0)

请尝试此片段

$(document).ready(function () {
var d = $("#example1grid").handsontable({
   colHeaders: ["", "Kia", "Nissan", "Toyota", "Honda"],
   cells: function(row, col, prop){
      const cellProperties = {};

    if (row === 1 && col === 2 || row === 1 && col === 3) {
       cellProperties.readOnly = true;  
    }

    if (row === 1 && col === 4){
       if (this.instance.getDataAtCell(row, col) === 0) {
       cellProperties.readOnly = true;  
    }
  }
    return cellProperties;
  }
});

var data = [
  ["2008", 10, 11, 12, 1],
  ["2009", 20, 11, 14, 0],
  ["2010", 30, 15, 12, 1]
];

$("#example1grid").handsontable("loadData", data);   
  //$('td').css('background-color', 'red');
});