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

Question

我是 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>

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

如果 cell1 有值，我需要将 cell2 中的状态更改为非活动状态，反之亦然。我怎样才能做到这一点？

Answer 1

如果单元格 1 有值，下面的代码将禁用单元格 2 并删除其值，反之亦然。换句话说：您不能在第 1 列和第 2 列中同时拥有值。hot2.addHook( 'afterChange', function( changes, src ) {&nbsp; [&nbsp; &nbsp; [row, prop, oldVal, newVal]&nbsp;&nbsp; ] = changes;&nbsp; if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) && newVal?.length > 0 ) {&nbsp; &nbsp; // delete value of cell 2 if cell 1 has a value&nbsp; &nbsp; hot2.setDataAtCell( row, prop + 1, '' );&nbsp; } else if ( prop == 1 && hot.getDataAtRowProp( row, prop - 1 ) && newVal?.length > 0 ) {&nbsp; &nbsp; // delete value of cell 1 if cell 2 has a value&nbsp; &nbsp; hot2.setDataAtCell( row, prop -1, '' );&nbsp; }})hot2.updateSettings( {&nbsp; &nbsp;cells: function ( row, col, prop ) {&nbsp; &nbsp; &nbsp;cellProperties = {};&nbsp; &nbsp; &nbsp;if ( prop == 1 && hot2.getDataAtRowProp( row, prop - 1 ) ) {&nbsp; &nbsp; &nbsp; &nbsp;// this disables cell 2 if cell 1 has a value&nbsp; &nbsp; &nbsp; &nbsp;cellProperties.readOnly = true;&nbsp; &nbsp; &nbsp;} else if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) ) {&nbsp; &nbsp; &nbsp; &nbsp;// this disables cell 1 if cell 2 has a value&nbsp; &nbsp; &nbsp; &nbsp;cellProperties.readOnly = true;&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp;cellProperties.readOnly = false;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;return cellProperties;&nbsp; &nbsp;}})

Answer 2

它对我有用：hot1.addHook('beforeRenderer', function(td, row, col, prop, value, cellProperties) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (prop === 'name') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var cellMeta = this.getCellMeta(row, this.propToCol('town'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} if (prop === 'town') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cellMeta = this.getCellMeta(row, this.propToCol('name'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; });您可以更改列名称，它仍然有效