如何从元素获取表格或单元格和行对象

Answer 1

您可以使用

cellClick

回调来获取

cell

和

row

， 以及单击的元素。这是一个例子：

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' }
]

const table = new Tabulator('#table', {
  data: data,
  columns: [
    {
      title: 'Name',
      field: 'name'
    },
    {
      title: 'Age',
      field: 'age'
    },
    {
      title: 'Gender',
      field: 'gender'
    },
    {
      title: 'Height',
      field: 'height'
    },
    {
      title: 'Color',
      field: 'col'
    },
    {
      title: 'Edit',
      field: 'Edit',
      formatter: (cell, formatterParams, onRendered) => {
        return '<i class="bi bi-pencil row-edit"></i> <i class="bi bi-trash row-delete"></i>'
      },
      cellClick: (e, cell) => {
        const icon = e.target.classList[2]
        const rowNum = cell.getRow().getPosition()
        const colName = cell.getColumn().getField()

        console.log(`'${icon}' icon of row ${rowNum} in '${colName}' column was clicked.`)
      }
    }
  ]
})

<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

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