dataviewjs 查询结果可视化编辑方案

效果演示

VID_20260109_033716

样式可以用 css 片段自定义。

这个功能实现不算太难,之前的方案是用 metaedit 插件,但是这个插件已经很久没有更新了。求人不如求己,自己写了个 dataviewjs 代码。

核心代码

dv.table(headers, data.map(row=>row.map(cell=>{
  const text = this.container.createEl("input", {
    "type": "text",
    "value": cell.rawValue
  })
  text.addEventListener('change', async (evt) => {
    updateMetadata(cell, evt.target.value)
  })
  return text
})))

代码只是一部分,还需要自行获取数据赋值到 headers 和 data,实现 updateMetadata 更新函数。如果是 front matter 字段,那更新函数很简单。如果是内联字段,也可以用 vault.process() 逐行查找替换。

这个代码也很简单,就是在表格每个单元格数据外套了一个输入框,监视输入同步更新笔记中的元数据。

需要注意,在实时模式下,显示的内联字段元数据不会立即更新(但笔记内容已经更新了),可以点一个链接,原地 tp 一下,就能刷新元数据显示。在阅读模式下,表格、笔记、元数据显示都会立即刷新。但是刷新时,会闪一下。几秒后(自己设定的 dataview 刷新时间),会再次闪一下。

1 个赞

功能很棒啊,但是能否给个小白一点的方案?
你这一是代码不全,二是原理讲得太复杂,
估计只有程序员能看懂吧?

1 个赞

完整代码已发布

Dataviewjs 单篇笔记可视化编辑查询表格