如何在制表器中使特定单元格可编辑

Question

`initializeTabulatortableBng() {
        let classThis = this;
        let bngTableData = classThis.tableDataWorm;
        function decimalFormatter(cell) {
            var value = cell.getValue();
            if (value !== null && value !== undefined && !isNaN(value)) {
                return parseFloat(value).toFixed(2);
            }
            return value;
        }
        this.bngTabulatorHeaders = [
            {
                title: "Type", field: "name", headerHozAlign: "left", width: 600, headerSort: false, hozAlign: "left", editable: false
            },
            {
                title: "Value", headerHozAlign: "center", width: 900,
                columns: [
                    {
                        title: "Min", field: "minValue", editor:false, headerSort: false, width: 300,hozAlign: "right", formatter:
                   decimalFormatter
                        , headerHozAlign: "right"
                        , editorParams: {
                            formatter: decimalFormatter
                        },
                    },
                    {
                        title: "Nom", field: "nomValue", editor: "input", headerSort: false, width: 300, hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right", editorParams: {
                            formatter: decimalFormatter
                        }
                    },
                    {
                        title: "Max", field: "maxValue", editor:false, headerSort: false, width: 300, hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"
                        ,editorParams: {
                            formatter: decimalFormatter
                        }
                    },
                ],
            },

        ];
        this.bngTabulatorTable = new Tabulator("#bngTabulatorTable", {
            maxHeight: "100%",
            maxwidth: "100%",
            data: bngTableData,
            layout: "fitColumns",
            headerSort: false,
            columns: this.bngTabulatorHeaders,
        })
    }

在这里我想启用名义全列的编辑，我已经完成了它的工作，我想要使可编辑单元效率[-]行意味着最小列第一个单元，即这里的0.91和伺服刚度（轴向）行-最小列第5个单元i， e 0.00 表示效率 [-] 和伺服刚度（轴向）行应可编辑``

Answer 1

如果我理解正确，您希望根据类型值使某些单元格可编辑。如果是这种情况，您需要将 Min 和 Max 的编辑器类型更改为

input

，并向这些列添加

editable

回调以确定它们是否应该可编辑。请参阅下面的注释行：

// Function to check if the cell should be editable:
function editCheck(cell) {
  const data = cell.getRow().getData()
     
  return data.name === 'Efficiency [-]' || data.name === 'Servo Stiffness (axial)'
}

initializeTabulatortableBng() {
  this.bngTabulatorHeaders = [
    {
      title: 'Type',
      field: 'name',
      headerHozAlign: 'left',
      width: 600,
      headerSort: false,
      hozAlign: 'left',
      editable: false
    },
    {
      title: 'Value',
      headerHozAlign: 'center',
      width: 900,
      columns: [
        {
          title: 'Min',
          field: 'minValue',
          editor: 'input', // <<<<  Change editor to input
          editable: editCheck, // <<<< Add editable callback
          headerSort: false,
          width: 300,
          hozAlign: 'right',
          formatter: decimalFormatter,
          headerHozAlign: 'right',
          editorParams: {
            formatter: decimalFormatter
          }
        },
        {
          title: 'Nom',
          field: 'nomValue',
          editor: 'input',
          headerSort: false,
          width: 300,
          hozAlign: 'right',
          formatter: decimalFormatter,
          headerHozAlign: 'right',
          editorParams: {
            formatter: decimalFormatter
          }
        },
        {
          title: 'Max',
          field: 'maxValue',
          editor: 'input', // <<<<  Change editor to input
          editable: editCheck,  // <<<< Add editable callback
          headerSort: false,
          width: 300,
          hozAlign: 'right',
          formatter: decimalFormatter,
          headerHozAlign: 'right',
          editorParams: {
            formatter: decimalFormatter
          }
        }
      ]
    }
  ]
}

以下是其工作原理的基本示例：

const data = [
  { id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
  { id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
  { id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]

function editCheck(cell) {
  const data = cell.getRow().getData()
  
  const isEditable = data.name === 'Mary May' || data.name === 'Billy Bob'
  
  if (!isEditable) {
    cell.setValue('')
    cell.getElement().style.backgroundColor = "#ccc"
  }
  
  return isEditable
}

function customFormatter(cell, formatterParams, onRendered) {
  
}

const table = new Tabulator('#table', {
  data: data,
  columns: [
    { title: 'Name', field: 'name'},
    { title: 'Age', field: 'age', editor:'input', editable:editCheck  },
    { title: 'Gender', field: 'gender' },
    { title: 'Height', field: 'height' },
    { title: 'Color', field: 'col' }
  ]
})

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

<div id="table"></div>

您还可以在这里阅读更多相关信息：https://tabulator.info/docs/5.5/edit#optional