Question

我正在使用tabulator.info库（v4.2.2）在表中显示数据。

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

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

尝试1：调用row.getCell（“ key”）始终返回false。

<!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()

它返回该行的完整数据对象。

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

在制表器的工具提示中访问当前行上的其他单元格

1 个答案: