渲染器使单元格相对于其他单元格值只读后的 JQuery handsontable - 不起作用

Posted 2023-03-22

【中文标题】渲染器使单元格相对于其他单元格值只读后的 JQuery handsontable - 不起作用

【英文标题】：JQuery handsontable after renderer make cell readonly with respect to other cell value - not working

【发布时间】：2017-03-16 15:00:19

【问题描述】：

我有一个handsontable，其中包含以下数据。

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

链接：FIDDLE

如果值为 0，我需要在最后一列中假设，那么我需要将包含行的第二列和第三列的对应列设为只读。

请注意以下图片了解更多详情：

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

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

【问题讨论】：

@ZekeDroid 请帮助好友

【参考方案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;

问候

【参考方案2】：

您可以使用的是已包含在 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。

请注意，我修改了您的数据以使用 String 值检查您的状况。

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

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

【参考方案3】：

请试试这个 sn-ps

$(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');
);