求助一个将数据库内容渲染为表格的方法
起因是看到了这一篇帖子利用 数据库 和 Chart（图表） 做小朋友身高管理 - 链滴，就想着是否有方法可以将数据库中的内容做成表格。
比如有这样一个数据库，每个主键有横坐标（A-B）和纵坐标（1-9）两个字段。
是否可以根据每个主键的横坐标和纵坐标两个字段，通过图表渲染成类似下面这种表格呢？感觉做一个物品管理蛮有意思的，数据库中添加其他字段描述物品信息，根据表格找到物品存放位置或者坐标（比如中药柜）
大家有什么好的方法吗（代码这方面我是真没时间学，之前也没接触过 😂）
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
那个帖子是根据 [js] 图表如何和表格联动 - wilsons 的回帖 这个改造的，这种方式需要自己手动解析数据库 json 数据，较为麻烦。
建议使用简单查询,实现起来更方便，可参考 震惊，思源表格和数据库竟然可以用 SQL 查询
然后，分别新建一个数据和表格，并复制数据库块 id 和表格块 id，然后在当前文档输入 {{}} 在弹出的对话框中，输入以下代码，并把刚才复制的 id 填入到下面的相应参数中即可
//!js
// 数据库块id
const avBlockId = '20250311063435-9066xpv';
// 表格块id
const tableBlockId = '20250311063452-p03kxva';
// 数据库变更后自动更新延迟，单位是毫秒，默认是1秒，0则不自动更新
// 注意：更新该参数后需要刷新页面才能生效
const autoFreshDelay = 1000;
// 监听数据库变化
observeAvChange();
return query(
"select * from ?",
[fromAv(avBlockId), item],
'',
({ rawData, updateTable, renderSuccess }) => {
let tableData = transformData(rawData);
tableData = toMarkdownTable(tableData);
updateTable(tableBlockId, tableData);
return renderSuccess('更新完成', item);
}
);
function toMarkdownTable(data) {
// 提取所有列名（包括空列 ""）
const columns = Array.from(
data.reduce((set, row) => {
Object.keys(row).forEach(key => set.add(key));
return set;
}, new Set())
).sort((a, b) => (a === "" ? -1 : a.localeCompare(b))); // 确保空列 "" 在最前面
// 构造表头行
const headerRow = `| ${columns.map(col => (col === "" ? "" : col)).join(" | ")} |`;
// 构造分隔符行
const separatorRow = `| ${columns.map(() => "---").join(" | ")} |`;
// 构造数据行
const dataRows = data.map(row => {
return `| ${columns.map(col => row[col] || "").join(" | ")} |`;
});
// 拼接所有部分
return [headerRow, separatorRow, ...dataRows].join("\n");
}
function transformData(input) {
// 创建一个 Map 来按横坐标分组
const groupedData = new Map();
// 遍历输入数组，按横坐标分组
input.forEach(item => {
const { 主键, 横坐标, 纵坐标 } = item;
// 如果横坐标不存在于 Map 中，则初始化
if (!groupedData.has(横坐标)) {
groupedData.set(横坐标, { "": 横坐标 });
}
// 将纵坐标和主键添加到对应的横坐标分组中
groupedData.get(横坐标)[纵坐标] = 主键;
});
// 将 Map 转换为数组并返回
return Array.from(groupedData.values());
}
function observeAvChange() {
// 监听av变化，当数据库块被修改时，重新获取数据
if(autoFreshDelay > 0 && !window['__table_observe__' + avBlockId]) {
window['__table_observe__' + avBlockId] = observeDOMChanges(document.querySelector('div[data-node-id="'+avBlockId+'"]'), ()=>{
setTimeout(() => {
item.querySelector('.protyle-action__reload').click();
}, 100);
}, autoFreshDelay, {attributes: false});
}
}
// 监听dom变化
function observeDOMChanges(targetNode, callback, debounceTime = 1000, options = {}) {
// 默认配置
const defaultOptions = {
attributes: true,
childList: true,
subtree: true,
};
// 合并默认配置与传入的配置
const config = Object.assign({}, defaultOptions, options);
// 创建一个观察器实例
const observer = new MutationObserver((mutationsList) => {
// 使用防抖函数确保单位时间内最多只调用一次回调
if(window['__table_observeTimer__' + avBlockId]) {
clearTimeout(window['__table_observeTimer__' + avBlockId]);
}
window['__table_observeTimer__' + avBlockId] = setTimeout(() => {
// 处理变化
callback(mutationsList);
}, debounceTime);
});
// 开始观察目标节点
observer.observe(targetNode, config);
// 返回一个函数，以便在不需要时能够停止观察
return () => {
observer.disconnect();
};
}
W 佬，我用这个查询的时候出现了一点问题。我想要一个 9×9 的表格，渲染出来的结果主键移位了，数据库中的数据是这样的，但是表格中 A3 A4 的主键数据跳到了 I8 I9，往后继续输入主键内容也是错位的。
这个问题，是思源笔记渲染结果和 api 解析不一致导致的。
已向官方提交了 issue Issue #14345 · siyuan-note/siyuan
暂时解决不了，你可以关注下这个 issue，等待官方回复后再看怎么解决。
FlowUs.息流 个人及团队的新一代生产力工具。
让复杂的信息管理更轻松、自由、充满创意。
jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。
Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。
Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。
Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。
七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。
HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。
Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。
以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。
Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。
禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。
Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。
Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。
Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。
Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。
脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。
互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。
Open Source, Open Mind, Open Sight, Open Future!
知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。
Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。
SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。
Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。
