tabulator表格，下拉列筛选的选项是A标签节点，如何禁止点击跳转

Question

我使用tabulator制作表格，数据如下：

let arr = [
{
    title: "<a href="http://vc.io/2053.html" title="测试文章111测试文章111测试文章111测试文章111测试文章111测试文章111测试文章111测试文章111">测试文章111测试文章111测试文章111测试文章111测试文章111测试文章111测试文章111测试文章111</a>",
    created: "2021-09-20 15:51:20",
    modified: "2024-01-11 17:22:54"
},
{
    title: "<a href="http://vc.io/1393.html" title="code2">code2</a>",
    created: "2022-03-07 08:58:20",
    modified: "2023-09-21 11:43:47"
}
]
// 创建实例
let Tabulator = new Tabulator("#datatable-table,{
locale: "default",                              // 语言环境
height: 'auto',                                 // 高度
layout: "fitDataFill", 
columns: [
    {
        "title": "标题",
        "field": "title",
        "headerSort": false,
        "headerHozAlign": "left",
        "hozAlign": "left",
        "formatter": "html",
        "headerFilter": "list",
        "headerFilterParams": {
            "valuesLookup": true,
            "clearable": true
        },
        "minWidth": "200"
    },
    {
        "title": "发布",
        "field": "created",
        "headerSort": false,
        "headerHozAlign": "left",
        "hozAlign": "left",
        "formatter": "html",
        "headerFilter": "input",
        "operator": "like"
    },
    {
        "title": "更新",
        "field": "modified",
        "headerSort": false,
        "headerHozAlign": "left",
        "hozAlign": "left",
        "formatter": "html",
        "headerFilter": "list",
        "headerFilterParams": {
            "valuesLookup": true,
            "clearable": true
        }
    }
],
data: arr,
pagination: false,
paginationMode: 'local',
})

创建好的例子如下：

点击列表文字会跳转页面，我该怎么禁止跳转呢？

Answer 1

Angel丶守护&雪之源 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

要禁止点击跳转，可以使用Tabulator提供的formatter函数来自定义列的显示内容。对于包含A标签的列，可以将其转换为纯文本显示，以禁止点击跳转。以下是解决方案：

1. 在Tabulator的columns配置中，对包含A标签的标题列进行修改；
2. 在formatter函数中将A标签转换为纯文本。

修改后的代码如下所示：

// 创建实例
let Tabulator = new Tabulator("#datatable-table", {
  locale: "default", // 语言环境
  height: 'auto', // 高度
  layout: "fitDataFill",
  columns: [
    {
      title: "标题",
      field: "title",
      headerSort: false,
      headerHozAlign: "left",
      hozAlign: "left",
      formatter: function(cell, formatterParams, onRendered) {
        // 将包含A标签的内容转换为纯文本
        return cell.getValue().replace(/<\/?a[^>]*>/gi, '');
      },
      headerFilter: "list",
      headerFilterParams: {
        valuesLookup: true,
        clearable: true
      },
      minWidth: "200"
    },
    {
      title: "发布",
      field: "created",
      headerSort: false,
      headerHozAlign: "left",
      hozAlign: "left",
      formatter: "html",
      headerFilter: "input",
      operator: "like"
    },
    {
      title: "更新",
      field: "modified",
      headerSort: false,
      headerHozAlign: "left",
      hozAlign: "left",
      formatter: "html",
      headerFilter: "list",
      headerFilterParams: {
        valuesLookup: true,
        clearable: true
      }
    }
  ],
  data: tabledata,
  pagination: false,
  paginationMode: 'local'
});

以上代码修改了标题列的formatter函数，在函数中使用正则表达式将A标签替换为空字符串。这样，A标签将被视为普通文本显示，点击不会触发跳转。