登录 注册

求助将数据库中的内容渲染为表格

本贴最后更新于 286 天前，其中的信息可能已经水流花落

求助一个将数据库内容渲染为表格的方法

起因是看到了这一篇帖子利用 数据库 和 Chart（图表） 做小朋友身高管理 - 链滴，就想着是否有方法可以将数据库中的内容做成表格。

比如有这样一个数据库，每个主键有横坐标（A-B）和纵坐标（1-9）两个字段。

image.png

是否可以根据每个主键的横坐标和纵坐标两个字段，通过图表渲染成类似下面这种表格呢？感觉做一个物品管理蛮有意思的，数据库中添加其他字段描述物品信息，根据表格找到物品存放位置或者坐标（比如中药柜）

image.png

大家有什么好的方法吗（代码这方面我是真没时间学，之前也没接触过 😂）

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28446 引用 • 119790 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    11155 引用 • 50666 回帖 • 52 关注
2 引用
如何通过数据库生成图表？ • xueluo
看见大家的回复 • auric
无锡 位置
50 悬赏
3 收藏
2 引用
15 回帖
10
4
748 220 8 158 5 357

相关帖子

被采纳的回答
  • wilsons • • 3 • 1 赞同
    付费者 捐赠者

    那个帖子是根据 [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();
    };
}

    r118.gif

15 回帖
求助将数据库中的内容渲染为表格

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons • • 3 • 1 赞同
    付费者 捐赠者

    那个帖子是根据 [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();
    };
}

    r118.gif

    3 回复
    1 引用
    2 操作
    wilsons 在 2025-03-11 09:50:26 更新了该回帖
    wilsons 在 2025-03-11 09:46:42 更新了该回帖
  • 其他回帖
  • auric •
    付费者 作者

    哈喽，w 佬，我看了 GitHub 上的 issue，这个问题好解决么，不好解决的话，我今天发现直接新建数据库，不要改动排序，输入的内容不会有太大问题 😂 ，就是用的时候需要小心 😂

    1 回复
  • auric •
    付费者 作者

    感谢 w 佬，之前的两篇简单查询的帖子我也学习过，但是实际应用的时候还是丈二和尚摸不着头脑，这方面我基本没有基础 😂 。非常感谢 w 佬花时间帮助我们！

  • auric •
    付费者 作者

    w 佬，有点奇怪，我换到其他的数据库和表格后就没有出现这个错误求助将数据库中的内容渲染为表格 - auric 的回帖 - 链滴，不知道怎么回事。

  • 查看全部回帖
auric
无锡
回帖
139
 帖子
5
 积分
15358

近期热议

推荐标签 标签

  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    736 引用 • 1307 回帖 • 2 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 1 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 429 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    232 引用 • 484 回帖
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    248 引用 • 1342 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 16 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4602 回帖 • 731 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    182 引用 • 400 回帖 • 1 关注
  • 创业

    你比 99% 的人都优秀么？

    81 引用 • 1396 回帖
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28446 引用 • 119790 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • AWS
    11 引用 • 28 回帖 • 1 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    33 引用 • 108 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 1 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    54 引用 • 190 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    203 引用 • 4025 回帖
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 6 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    285 引用 • 248 回帖 • 2 关注
  • OneNote
    2 引用 • 5 回帖
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    79 引用 • 431 回帖 • 1 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 548 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1708 回帖 • 1 关注

最新标签