思源笔记折腾记录 - 表格式嵌入块

本贴最后更新于 648 天前,其中的信息可能已经时移俗易

嵌入块表格.gif

嵌入块表格 1.gif

表格式嵌入块呢,顾名思义就是把嵌入块渲染成表格的样式。

也就是说呢,就是看起来像一个表格的嵌入块。

或者说是在嵌入块里面的表格。

那么为什么要有表格式嵌入块呢?

因为有用户说有的时候嵌入块显示成表格的样式比较好,那么聪明的你知道为什么有人要把嵌入块显示成表格呢?

我也很好奇这个问题,简单了解了一下就是在有些情况下需要把嵌入块显示成表格,所以就需要有一个表格式嵌入块的功能。

所以表格式嵌入块的情况就是这样了,原理也还比较简单,直接上代码码吧,代码片段有风险,玩脱了别找我麻烦嗷

import { Model } from "./model.js";
import { 重渲染配置表 } from "./replace.js";
setTimeout(渲染所有嵌入块表格, 1000);
new Model().all(() => {
  setTimeout(渲染所有嵌入块表格, 500);
});
setInterval(渲染所有嵌入块表格, 5000);
async function 渲染所有嵌入块表格() {
  let 嵌入块列表 = document.querySelectorAll(
    '[data-type="NodeBlockQueryEmbed"]'
  );
  嵌入块列表.forEach((嵌入块元素) => {
    try {
      渲染表格(嵌入块元素);
    } catch (e) {
      console.error(e);
    }
  });
}
async function 渲染表格(嵌入块元素) {
  let sql = 嵌入块元素.getAttribute("data-content");
  let id = 嵌入块元素.getAttribute("id");
  let 重渲染配置 = await 获取重渲染配置(sql, id);
  if (
    重渲染配置 &&
    重渲染配置.sql替换 &&
    重渲染配置.sql替换 instanceof Function
  ) {
    sql = await 重渲染配置.sql替换(sql, id);
  }
  if (sql && 重渲染配置) {
    let 查询结果 = await 获取查询结果(sql);
    if (查询结果 && 查询结果[0]) {
      if (校验查询结果为嵌入(查询结果)) {
        return;
      }

      let 表格 = document.createElement("table");
      表格.setAttribute("contenteditable", false);
      表格.setAttribute("spellcheck", false);
      表格.innerHTML = "<colgroup></colgroup>";
      for (let i = 0; i < Object.getOwnPropertyNames(查询结果[0]).length; i++) {
        表格.querySelector("colgroup").innerHTML += "<col></col>";
      }
      let 表头 = await 生成表头(查询结果[0], 重渲染配置, sql, id);
      let 表身 = await 生成表身(查询结果, 重渲染配置, sql, id);
      表格.appendChild(表头);
      表格.appendChild(表身);
      刷新表格(嵌入块元素, 表格);
    }
  }
}
function 获取重渲染配置(sql, id) {
  let 重渲染配置 = 重渲染配置表.find((item) => {
    return item.判定函数(sql, id);
  });
  return 重渲染配置;
}
function 校验查询结果为嵌入(查询结果) {
  let 字段名列表 = Object.getOwnPropertyNames(查询结果[0]);
  return (
    JSON.stringify(字段名列表) ==
    `["alias","box","content","created","fcontent","hash","hpath","ial","id","length","markdown","memo","name","parent_id","path","root_id","sort","subtype","tag","type","updated"]`
  );
}
async function 刷新表格(嵌入块元素, 表格) {
  let 插入容器 = 嵌入块元素.querySelector(
    ".ft__smaller.ft__secondary.b3-form__space--small"
  );
  if (!插入容器) {
    return;
  }
  if (!插入容器.shadowRoot) {
    插入容器.attachShadow({ mode: "open" });
  }
  插入容器.shadowRoot.innerHTML = "";
  插入容器.shadowRoot.innerHTML += `
    <link rel="stylesheet" type="text/css" href="/snippets/embedTable/table.css">
  
    </link>
    `;
  插入容器.shadowRoot.appendChild(表格);
}
async function 获取查询结果(sql) {
  let data = await fetch("/api/query/sql", {
    method: "post",
    body: JSON.stringify({
      stmt: sql,
    }),
  });
  return (await data.json()).data;
}
async function 生成表头(结果条目, 重渲染配置, sql, id) {
  let 字段名列表 = Object.getOwnPropertyNames(结果条目);
  if (
    重渲染配置 &&
    重渲染配置.字段过滤 &&
    重渲染配置.字段过滤 instanceof Function
  ) {
    字段名列表 = await 重渲染配置.字段过滤(字段名列表, sql, id);
  }

  console.log(字段名列表.length);
  let 表头元素 = document.createElement("thead");
  表头元素.innerHTML = "<thead><tr></tr></thead>";

  for await (let 字段名 of 字段名列表) {
    if (
      重渲染配置 &&
      重渲染配置.表头替换 &&
      重渲染配置.表头替换 instanceof Function
    ) {
      字段名 = await 重渲染配置.表头替换(字段名, sql, id);
    }
    表头元素.querySelector("tr").innerHTML += `<th>${字段名}</th>`;
  }
  return 表头元素;
}
async function 生成表身(查询结果, 重渲染配置, sql, id) {
  let 表身元素 = document.createElement("tbody");
  let 字段名列表 = Object.getOwnPropertyNames(查询结果[0]);
  if (
    重渲染配置 &&
    重渲染配置.字段过滤 &&
    重渲染配置.字段过滤 instanceof Function
  ) {
    字段名列表 = 重渲染配置.字段过滤(字段名列表, sql, id);
  }
  for await (let 结果条目 of 查询结果) {
    表身元素.appendChild(
      await 生成行(结果条目, 字段名列表, 重渲染配置, sql, id)
    );
  }
  return 表身元素;
}
async function 生成行(结果条目, 字段名列表, 重渲染配置, sql, id) {
  console.log(字段名列表);
  let 行元素 = document.createElement("tr");
  for await (let 属性名 of 字段名列表) {
    let 属性值 = 结果条目[属性名];
    if (
      重渲染配置 &&
      重渲染配置.表身替换 &&
      重渲染配置.表身替换 instanceof Function
    ) {
      属性值 = 重渲染配置.表身替换(属性值, 结果条目, sql, id);
    }
    console.log(属性值);
    行元素.innerHTML += `<td>${属性值}</td>`;
  }

  return 行元素;
}

model.js 里面是一个很简单的 websocket 监听,就不放出来了,反正有文件,可以自己看一下。

好了文件包在这里,没有依赖就是一个单纯的代码片段,有能力的筒子还可以分享自己写的 replace.js 玩。

链接:https://pan.baidu.com/s/1lNy8oqviEJIg-3pVVbRXmg?pwd=i477
提取码:i477
--来自百度网盘超级会员 V5 的分享

  • 思源笔记

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

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

    22337 引用 • 89380 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • foolishman83

    下载的文件夹放在哪里才能生效,是不是属于挂件?

推荐标签 标签

  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1434 引用 • 10054 回帖 • 490 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 339 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 5 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 136 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖
  • iOS

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

    85 引用 • 139 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • FlowUs

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

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

    1 引用 • 1 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 617 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 680 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 787 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 241 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 669 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注