Tabulator 如何筛选 JSON 字符串中的 situation 字段？

2026-11-06数据小陈

结论

示例中的 details 是 JSON 字符串，不能直接按字段访问。先用 JSON.parse() 解析，再将 situation 提取为普通数据字段，就可以通过 Tabulator 的 setFilter() 按值筛选。

解析数据并筛选

可以将 situation 提取到每行的顶层字段，筛选时使用 situation：

const sourceData = [
  {
    owner: "Fred",
    color: "red",
    details: "{\"name\": \"Blood\", \"age\": 22, \"situation\": \"single\"}"
  },
  {
    owner: "Georges",
    color: "bleu",
    details: "{\"name\": \"Sarr\", \"age\": 41, \"situation\": \"married\"}"
  }
];

const rows = sourceData.map(row => {
  const details = JSON.parse(row.details);

  return {
    ...row,
    details,
    situation: details.situation
  };
});

const table = new Tabulator("#example-table", {
  data: rows,
  columns: [
    { title: "Owner", field: "owner" },
    { title: "Color", field: "color" },
    { title: "Situation", field: "situation" }
  ]
});

table.setFilter("situation", "=", "married");

setFilter(field, type, value) 根据字段、比较条件和值筛选数据，其中 = 表示精确匹配。Tabulator 的筛选文档还介绍了自定义筛选函数，可用于自行检查行数据。Tabulator 筛选文档

接受两种查询写法

如果搜索框接受 situation=married 和 {"situation":"married"} 两种写法，可以先从输入中解析出筛选值，再调用 setFilter()：

function getSituationValue(input) {
  const text = input.trim();

  if (text.startsWith("{")) {
    const query = JSON.parse(text);
    return query.situation;
  }

  const match = text.match(/^situation\s*=\s*(.+)$/i);
  if (match) {
    return match[1].trim();
  }

  throw new Error("请输入 situation=值 或包含 situation 字段的 JSON");
}

const value = getSituationValue(searchInput.value);
table.setFilter("situation", "=", value);

两种输入都会被转换为 married，随后由 table.setFilter("situation", "=", value) 执行筛选。输入不是合法 JSON，或 JSON 中缺少 situation 字段时，应在筛选前提示用户修正输入。

注意事项

JSON.parse() 只能解析有效 JSON。如果某行的 details 格式不合法，解析会抛出异常。是否捕获异常并提示用户或跳过该行，可根据数据来源决定。
如果可以调整数据生成方式，建议一开始就将 details 保存为对象，例如 details: { name: "Sarr", age: 41, situation: "married" }，这样初始化表格时就不必重复解析字符串。
如果输入数据中有多个可筛选的内部字段，可以在转换数据时分别提取为顶层字段，也可以编写自定义筛选函数来检查解析后的 details。