JQuery 渲染器使单元格相对于其他单元格值只读后可处理 - 不工作
JQuery handsontable after renderer make cell readonly with respect to other cell value - not working
我有一个 handsontable
,其中包含以下数据。
var data = [
["2008", 10, 11, 12, 1],
["2009", 20, 11, 14, 0],
["2010", 30, 15, 12, 1]
];
Link: 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);
});
但是不工作请指导我....
您不需要使用 JQuery 来更新只读属性。
您需要像我的示例一样创建单元格属性:
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;
}
此致
您可以使用的是Handsontable中已经包含的属性只读。
请参阅下面我在初始化 table 以及进行任何更改后调用的函数:
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"]
],
原因是如果您需要直接在 table 中更改数据,您将输入的新值将是 String。这样,列 Nissan 和 Toyota 将根据值 Honda 动态更改属性。我想你想在这里实现。
请试试这个片段
$(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');
});
我有一个 handsontable
,其中包含以下数据。
var data = [
["2008", 10, 11, 12, 1],
["2009", 20, 11, 14, 0],
["2010", 30, 15, 12, 1]
];
Link: 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);
});
但是不工作请指导我....
您不需要使用 JQuery 来更新只读属性。
您需要像我的示例一样创建单元格属性:
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;
}
此致
您可以使用的是Handsontable中已经包含的属性只读。 请参阅下面我在初始化 table 以及进行任何更改后调用的函数:
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"]
],
原因是如果您需要直接在 table 中更改数据,您将输入的新值将是 String。这样,列 Nissan 和 Toyota 将根据值 Honda 动态更改属性。我想你想在这里实现。
请试试这个片段
$(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');
});