如果前一个单元格具有值 HandsOnTable,如何将单元格更改为非活动状态
How create change cell to inactive if previous cell has value HandsOnTable
我是 JavaScript 的新手。
我创建了一个 table 单元格,我们可以在其中添加值,我正在使用 HandsOnTable。
我需要创建一个非活动单元格,如果前一个单元格有值,我们无法在 HandsOnTable 的非活动单元格中设置值。
这是我的代码:
<div id="downtimetable"></div>
<script script type="text/javascript" th:inline="javascript">
let dataFromSpringDown = [[${downtimes}]];
let dataObjDown = [];
let temp1 = {
name: ' ',
town: ' ',
tent: ' ',
izoterm: ' ',
ref: ' '
}
for(let obj of dataFromSpringDown){
let object = {
name: obj["name"],
town: obj["town"],
tent: obj["tent"],
izoterm: obj["izoterm"],
ref: obj["ref"]
};
dataObjDown.push(object);
}
dataObjDown.push(temp);
let container2 = document.getElementById('downtimetable');
let hot2 = new Handsontable(container2, {
data: dataObjDown,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
colHeaders: [
'Name',
'Town',
'Cost'
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
collapsibleColumns: true,
nestedHeaders : [
[
'Name',
'Town',
{
label: 'Cost',
colspan: 3
}
],
[
'','','Tent','Izo','Ref'
]
],
manualColumnResize : true
});
function myFunctionDown() {
var json = JSON.stringify(dataObjDown);
var xhr = new XMLHttpRequest();
xhr.open("POST","/downtime_rows_json");
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(json);
}
</script>
<button onclick="myFunctionDown()" class="btn btn-info">From table</button>
这是一个 table 使用脚本创建的:
如果单元格 1 有值,我需要将单元格 2 中的状态更改为非活动状态,反之亦然。我该怎么做?
我想我们可以使用这个脚本,但我不明白如何获取前一个单元格
hot2.updateSettings({
cells: function (row, col, prop) {
var cellProperties = {};
if (hot2.getDataAtRowProp(row, prop) === 'Town1') {
cellProperties.editor = false;
} else {
cellProperties.editor = 'text';
}
return cellProperties;
}
})
如果单元格 1 有值,下面的代码将禁用单元格 2 并删除它的值,反之亦然。换句话说:您不能在第 1 列和第 2 列中都有值。
hot2.addHook( 'afterChange', function( changes, src ) {
[
[row, prop, oldVal, newVal]
] = changes;
if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) && newVal?.length > 0 ) {
// delete value of cell 2 if cell 1 has a value
hot2.setDataAtCell( row, prop + 1, '' );
} else if ( prop == 1 && hot.getDataAtRowProp( row, prop - 1 ) && newVal?.length > 0 ) {
// delete value of cell 1 if cell 2 has a value
hot2.setDataAtCell( row, prop -1, '' );
}
})
hot2.updateSettings( {
cells: function ( row, col, prop ) {
cellProperties = {};
if ( prop == 1 && hot2.getDataAtRowProp( row, prop - 1 ) ) {
// this disables cell 2 if cell 1 has a value
cellProperties.readOnly = true;
} else if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) ) {
// this disables cell 1 if cell 2 has a value
cellProperties.readOnly = true;
} else {
cellProperties.readOnly = false;
}
return cellProperties;
}
})
它对我有用:
hot1.addHook('beforeRenderer', function(td, row, col, prop, value, cellProperties) {
if (prop === 'name') {
var cellMeta = this.getCellMeta(row, this.propToCol('town'));
cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
} if (prop === 'town') {
var cellMeta = this.getCellMeta(row, this.propToCol('name'));
cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
}
});
您可以更改列名称,它仍然有效
我是 JavaScript 的新手。 我创建了一个 table 单元格,我们可以在其中添加值,我正在使用 HandsOnTable。 我需要创建一个非活动单元格,如果前一个单元格有值,我们无法在 HandsOnTable 的非活动单元格中设置值。
这是我的代码:
<div id="downtimetable"></div>
<script script type="text/javascript" th:inline="javascript">
let dataFromSpringDown = [[${downtimes}]];
let dataObjDown = [];
let temp1 = {
name: ' ',
town: ' ',
tent: ' ',
izoterm: ' ',
ref: ' '
}
for(let obj of dataFromSpringDown){
let object = {
name: obj["name"],
town: obj["town"],
tent: obj["tent"],
izoterm: obj["izoterm"],
ref: obj["ref"]
};
dataObjDown.push(object);
}
dataObjDown.push(temp);
let container2 = document.getElementById('downtimetable');
let hot2 = new Handsontable(container2, {
data: dataObjDown,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
colHeaders: [
'Name',
'Town',
'Cost'
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
collapsibleColumns: true,
nestedHeaders : [
[
'Name',
'Town',
{
label: 'Cost',
colspan: 3
}
],
[
'','','Tent','Izo','Ref'
]
],
manualColumnResize : true
});
function myFunctionDown() {
var json = JSON.stringify(dataObjDown);
var xhr = new XMLHttpRequest();
xhr.open("POST","/downtime_rows_json");
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(json);
}
</script>
<button onclick="myFunctionDown()" class="btn btn-info">From table</button>
这是一个 table 使用脚本创建的:
如果单元格 1 有值,我需要将单元格 2 中的状态更改为非活动状态,反之亦然。我该怎么做?
我想我们可以使用这个脚本,但我不明白如何获取前一个单元格
hot2.updateSettings({
cells: function (row, col, prop) {
var cellProperties = {};
if (hot2.getDataAtRowProp(row, prop) === 'Town1') {
cellProperties.editor = false;
} else {
cellProperties.editor = 'text';
}
return cellProperties;
}
})
如果单元格 1 有值,下面的代码将禁用单元格 2 并删除它的值,反之亦然。换句话说:您不能在第 1 列和第 2 列中都有值。
hot2.addHook( 'afterChange', function( changes, src ) {
[
[row, prop, oldVal, newVal]
] = changes;
if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) && newVal?.length > 0 ) {
// delete value of cell 2 if cell 1 has a value
hot2.setDataAtCell( row, prop + 1, '' );
} else if ( prop == 1 && hot.getDataAtRowProp( row, prop - 1 ) && newVal?.length > 0 ) {
// delete value of cell 1 if cell 2 has a value
hot2.setDataAtCell( row, prop -1, '' );
}
})
hot2.updateSettings( {
cells: function ( row, col, prop ) {
cellProperties = {};
if ( prop == 1 && hot2.getDataAtRowProp( row, prop - 1 ) ) {
// this disables cell 2 if cell 1 has a value
cellProperties.readOnly = true;
} else if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) ) {
// this disables cell 1 if cell 2 has a value
cellProperties.readOnly = true;
} else {
cellProperties.readOnly = false;
}
return cellProperties;
}
})
它对我有用:
hot1.addHook('beforeRenderer', function(td, row, col, prop, value, cellProperties) {
if (prop === 'name') {
var cellMeta = this.getCellMeta(row, this.propToCol('town'));
cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
} if (prop === 'town') {
var cellMeta = this.getCellMeta(row, this.propToCol('name'));
cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
}
});
您可以更改列名称,它仍然有效