如何仅使选定的行在制表器中可编辑?

问题描述 投票:0回答:1

我正在使用Tabulator编写React中的表。

我想实现什么

我想强迫用户一次只编辑一行(但是该行中的所有列):

  1. 选择行

  2. 单击编辑按钮->仅使该行可编辑(所有列)

  3. 通过内联编辑将值编辑/输入到那些可编辑的列中
  4. 单击保存->将更改保存到表中

我尝试过的:

使用CellComponent中的edit()API强制该单元格可编辑。但这并没有打开要编辑的单元格(在单元格上调用edit()后单击单元格时,什么也没有发生。

const handleIfEditable = () => false; // force 

const columns: [
  { title: "ID", field: "id", editor: "input", editable: handleIfEditable },
  { title: "Name", field: "name", editor: "input", editable: handleIfEditable }
];

const selectedRowComponents = table.getSelectedRows();

const row = selectedRowComponents[0];
const cells = row.getCells();

cells.map(cell => cell.edit()) // trying to make all cells in row editable, didn't work (nothing happens)
tabulator
1个回答
0
投票

这是我所执行的。这就是您要找的东西吗?

Users TableUsers Table Edit

function formatter_EditButton(cell, formatterParams, onRendered){
    return "<div class='btn badge badge-pill badge-secondary'>Edit</div>";
}
function formatter_CancelButton(cell, formatterParams, onRendered){
   return "<div class='btn badge badge-pill badge-warning'>Cancel</div>";
}
function formatter_SaveButton(cell, formatterParams, onRendered){
   return "<div class='btn badge badge-pill badge-success'>Save</div>";
}
function formatter_DeleteButton(cell, formatterParams, onRendered){
   return "<div class='btn badge badge-pill badge-danger'>Delete</div>";
}

function cellClick_EditButton(e, cell){
  currentRow = cell.getRow()
  currentTable = cell.getTable()
  selectedRows = currentTable.getSelectedRows()
    if (selectedRows.length == 0) {
      for (i = 0; i < selectedRows.length; i++) {
        selectedRows[i].deselect()
        selectedRows[i].reformat()
      }
      currentTable.deselectRow()
      currentRow.select()
      currentRow.reformat()

      cells = currentRow.getCells()
      for (i = 0; i < cells.length; i++) {
        cells[i].setValue(cells[i].getValue())
      }
      currentTable.hideColumn("EditButton")
      currentTable.showColumn("CancelButton")
      currentTable.showColumn("DeleteButton")
      currentTable.showColumn("SaveButton")
    }
  }
function cellClick_CancelButton(e, cell){
  if (!cell.getRow().isSelected()){
    return
  }
  currentRow = cell.getRow()
  currentTable = cell.getTable()
  if (cell.getRow().isSelected()){
    //Cancel
    cells = currentRow.getCells()
    for (i = 0; i < cells.length; i++) {
      cells[i].restoreOldValue();
    }
    stopEditing(cell)
  }
}
function cellClick_SaveButton(e, cell){
  if (!cell.getRow().isSelected()){
    return
  }
  stopEditing(cell)
}
function cellClick_DeleteButton(e, cell){
  if (!cell.getRow().isSelected()){
    return
  }
  //Can use prompt to make them connfirm the name
  if(window.confirm("Delete the user "+cell.getData().FirstName+" "+ cell.getData().LastName+"?"))
  {
    stopEditing(cell)
    cell.getRow().delete()
  }
}
function stopEditing(cell){
  currentRow = cell.getRow()
  currentTable = cell.getTable()
  currentTable.deselectRow()
  currentTable.showColumn("EditButton")
  currentTable.hideColumn("CancelButton")
  currentTable.hideColumn("DeleteButton")
  currentTable.hideColumn("SaveButton")
  currentRow.reformat()
}

function isRowSelected(cell){
  return cell.getRow().isSelected()
}
function cellClick_FlipIfSelected(e, cell){
  if (cell.getRow().isSelected()){
    cell.setValue(!cell.getValue())
  }
}

var UsersTable = new Tabulator("#UsersTable",{
  index:"ID",
  ajaxURL:"/api/getUsersData",
  layout:"fitDataFill",
  layoutColumnsOnNewData:true,
  paginationSize:10,
  pagination:"local",
  selectable:false,
  initialSort:[
    {column:"FirstName", dir:"asc"},
    {column:"LastName", dir:"asc"},
    {column:"Active", dir:"desc"}
  ],
  columns:[
    {title:"Active", field:"Active", formatter:"tickCross", mutator: mutator_Active, cellClick:cellClick_FlipIfSelected, align:"center", resizable:false},
    {title:"ID", field:"ID"},
    {title:"Last", field:"LastName", editable:isRowSelected, editor:"input", resizable:false},
    {title:"First", field:"FirstName", editable:isRowSelected, editor:"input", resizable:false},
    {title:"Email", field:"Email", editable:isRowSelected, editor:"input", resizable:false},
    {title:"Phone Number", field:"PhoneNumber", editable:isRowSelected, editor:"input", resizable:false},
    {title:"Created", field:"CreatedAt", editable:isRowSelected, formatter:"datetime", resizable:false},
    {title:"Updated", field:"UpdatedAt", editable:isRowSelected, formatter:"datetime", resizable:false},
    {field:"EditButton",formatter:formatter_EditButton,cellClick:cellClick_EditButton, headerSort:false, align:"center", resizable:false},
    {field:"CancelButton", formatter:formatter_CancelButton,cellClick:cellClick_CancelButton, headerSort:false, align:"center", resizable:false,visible:false},
    {field:"SaveButton",formatter:formatter_SaveButton,cellClick:cellClick_SaveButton, headerSort:false, align:"center", resizable:false,visible:false},
    {field:"DeleteButton",formatter:formatter_DeleteButton,cellClick:cellClick_DeleteButton, headerSort:false, align:"center", resizable:false,visible:false},
  ]
})
© www.soinside.com 2019 - 2024. All rights reserved.