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

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

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

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

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

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

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

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

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 的分享