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

Posted 2023-03-22

【中文标题】如果前一个单元格具有值 HandsOnTable，如何将单元格更改为非活动状态

【英文标题】：How create change cell to inactive if previous cell has value 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 并设置空值

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

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