在 Tabulator 的工具提示中访问当前行的其他单元格

Question

我正在使用 tabulator.info 库 (v4.2.2) 在 table 中呈现数据。

我有一个包含很多列的 table，所以我想显示当前行最重要的键值作为悬停在该行上时的工具提示。

出于某种原因，我无法正确引用该行的其他单元格。

尝试 1：调用 row.getCell("key") returns 始终为假。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://unpkg.com/tabulator-tables@4.2.2/dist/css/tabulator.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="example-table"></div>
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.2/dist/js/tabulator.min.js"></script>
    <script type="text/javascript">
      //sample data
      var tabledata = [
      {id:1, name:"Oli Bob", age:"12", col:"red", dob:"12/08/2017"},
      {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
      {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
      {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
      {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
      ];

      var table = new Tabulator("#example-table", {
      height:200, // set height of table to enable virtual DOM
      data:tabledata, //load initial data into table
      layout:"fitColumns", //fit columns to width of table (optional)
      columns:[ //Define Table Columns
      {title:"Name", field:"name", sorter:"string", width:150},
      {title:"Age", field:"age", sorter:"number", align:"left", formatter:"progress"},
      {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
      {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
      ],
      rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked
      alert("Row " + id + " Clicked!!!!");
      },
          tooltips:function(cell){
          //cell - cell component
          var tip = "";
          var row = cell.getRow();
          console.debug(cell.getRow);
          var cells = row.getCells();
          const keys = ["name", "age", "col", "dob"];
          for (var i=0; i < keys.length; i++) {
            var cell = row.getCell(keys[i]);
            console.debug(keys[i] + " : " + cell);
            if (cell) {
              tip += cell.getValue();
              tip += "";
            }
          }
          //function should return a string for the tooltip of false to hide the tooltip
          return "banana " + tip;
        },

      });
    </script>
  </body>
  </html>

我也曾尝试遍历当前行的所有单元格，但是当我调用 row.getCells() 时返回了一个空数组，因此没有什么可遍历的。

Answer 1

您正在寻找 cell.getData()

它 returns 行的完整数据对象。

这里记录了所有的单元组件方法：http://tabulator.info/docs/4.2/components#component-cell

在 Tabulator 的工具提示中访问当前行的其他单元格

Access the other cells on the current row in a tool tip in Tabulator

tabulator