如何在制表器中使特定单元格可编辑 [已关闭]-解网

问：

想改进这个问题吗？通过编辑这篇文章添加详细信息并澄清问题。

2天前关闭。

改进此问题

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

在这里，我想为 nom full 列启用编辑，我已经完成了它的工作，我想使可编辑单元格效率 [-] 行表示最小列第一个单元格，即 0.91 这里和伺服刚度（轴向）行 -min 列第 5 个单元格，即 0.00 表示效率 [-] 和伺服刚度（轴向）行应该是可编辑的 ''

JavaScript 角度制表器

// 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
}

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

如何在制表器中使特定单元格可编辑 [已关闭]

how to make particular cell editable in tabulator [closed]

评论

评论