求助一个将数据库内容渲染为表格的方法
起因是看到了这一篇帖子利用 数据库 和 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(); }; }
百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。
有什么新发现就分享给大家吧！
Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。
Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。
DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。
Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。
据说 99% 的性能瓶颈都在数据库。
Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。
Latke 是一款以 JSON 为主的 Java Web 框架。
CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。
Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。
Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。
这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！
IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。
SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
即用的 Vim-IDE。
红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。
H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。
黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。
A second brain, for you, forever.
机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。
Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。
有点意思就行了
CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。
MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。