如果前一个单元格具有值 HandsOnTable，如何将单元格更改为非活动状态答案

【问题标题】：How create change cell to inactive if previous cell has value HandsOnTable如果前一个单元格具有值 HandsOnTable，如何将单元格更改为非活动状态
【发布时间】：2021-03-14 05:40:13
【问题描述】：

我是 JavaScript 新手。我创建了一个包含单元格的表格，我们可以在其中添加值，并且我正在使用 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>

这是一个用脚本创建的表格：

如果 cell1 有值，我需要将 cell2 中的状态更改为非活动状态，反之亦然。我该怎么做？

我认为我们可以使用这个脚本，但我不明白如何获取上一个单元格

 hot2.updateSettings({
    cells: function (row, col, prop) {
      var cellProperties = {};
  
      if (hot2.getDataAtRowProp(row, prop) === 'Town1') {
        cellProperties.editor = false;
      } else {
        cellProperties.editor = 'text';
      }
  
      return cellProperties;
    }
  })

【问题讨论】：

什么是cell1，什么是cell2？
Cell1 = 上图，Cell2 = Town1 。如果 Cell1 有值，我需要设置非活动 Cell2 并设置空值

标签： javascript handsontable

【解决方案1】：

如果单元格 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;
   }
})

【讨论】：

【解决方案2】：

它对我有用：

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

您可以更改列名，它仍然可以工作

【讨论】：