Question

使用制表符，我有一个单元格，其中包含唯一的URL，整行都应链接。

我尝试了以下代码：

{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, 
minwidth:30, minWidth:30},
{title:"Database", field:"database", minwidth:110, editor:"input"},
{title:"Environment", field:"environment", minwidth:140, editor:"input"},
{title:"Product", field:"product", minwidth:140, editor:"input"},
{title:"URL", field:"url", formatter:"link", minwidth:130, 
editor:"input"},'''

$("#tabulator-example").tabulator({
    rowClick:function(e,row){

    }, 
});

每次尝试添加示例中的rowClick代码行时，Tabulator表就会消失。

Answer 1

这是我创建表的方式（如下）。

然后在您的rowClick函数中，您可以访问行数据：

    rowClick: function (e, row) {
        // alert("Row " + row.getData().id + " Clicked!!!!");
    },

let dataTable = new Tabulator("#data-list", {
        height: "84vh",
        width: 150,
        virtualDomBuffer: 30,
        // layout: "fitDataFill",
        layout: "fitColumns",
        resizableColumns: false,
        selectable: 1,
        responsiveLayout: "hide",
        placeholder: "No Data",
        columns: [
            {
                title: "Meeting",
                field: "startDate",
                formatter: eventListRowFormatter,
                variableHeight: true,
                headerSort: false
            },
            { formatter: deleteIcon, width: 5, align: "center", cellClick: deleteFromEventList }
        ],
        rowClick: function (e, row) {
            // do something
        },
        rowDeselected: function (row) {
          // do something
        },
        ajaxLoader: false
    });

Answer 2

使用Selectable selectable: true,

const tabledata = [{
    id: 1,
    name: "Oli Bob",
    EDN: ''
  },
  {
    id: 2,
    name: "Mary May",
    EDN: ''
  },
  {
    id: 3,
    name: "Christine Lobowski",
    EDN: ''
  },
  {
    id: 4,
    name: "Brendon Philips",
    EDN: ''
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    EDN: ''
  },
  {
    id: 6,
    name: "Frank Harbours",
    EDN: ''
  },
];

const table = new Tabulator("#example-table", {
  data: tabledata,
  selectable: true,
  columns: [{
      title: "ID",
      field: "id"
    },
    {
      title: "Name",
      field: "name"
    },
    {
      title: "EDN",
      field: "EDN",
    }
  ]
});

<!DOCTYPE html>
<html>

<head>
  <!-- Tabulator CDN -->
  <link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div id="example-table"></div>


</body>

</html>

有没有一种方法可以使制表器中的整个行都可单击该行中包含每行唯一URL的单元格？

2 个答案: