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

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

嵌入块表格.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 的分享

  • 思源笔记

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

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

    18132 引用 • 66891 回帖

相关帖子

欢迎来到这里!

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

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

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

推荐标签 标签

  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • Swagger

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

    26 引用 • 35 回帖 • 7 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 676 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 339 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 177 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 分享

    有什么新发现就分享给大家吧!

    240 引用 • 1729 回帖
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    37 引用 • 24 回帖 • 1 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 41 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 22 回帖 • 675 关注
  • 职场

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

    126 引用 • 1699 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 549 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 108 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 380 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 124 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    171 引用 • 988 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 125 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 2 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    529 引用 • 3527 回帖 • 1 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 171 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    25 引用 • 215 回帖 • 161 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 689 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 56 关注