表格式嵌入块呢,顾名思义就是把嵌入块渲染成表格的样式。
也就是说呢,就是看起来像一个表格的嵌入块。
或者说是在嵌入块里面的表格。
那么为什么要有表格式嵌入块呢?
因为有用户说有的时候嵌入块显示成表格的样式比较好,那么聪明的你知道为什么有人要把嵌入块显示成表格呢?
我也很好奇这个问题,简单了解了一下就是在有些情况下需要把嵌入块显示成表格,所以就需要有一个表格式嵌入块的功能。
所以表格式嵌入块的情况就是这样了,原理也还比较简单,直接上代码码吧,代码片段有风险,玩脱了别找我麻烦嗷
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 的分享
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于