【分享】html 内容块 +quicker 实现对嵌入块分页查询

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

因为嵌入块一般特别长,想分页进行浏览就不用一次性看完了。

结合思源的 html 块,块属性实现对嵌入块的分页查询。代码很烂,不喜轻轻喷。

用法

  1. 复制 html 代码到 html 块中,并修改 custom_id 为唯一标识。建议这个 id 使用 html 块 id。(html 代码去文末复制)
  2. 配置 html 块的属性。
    1. qrkid 表示 嵌入块 id
    2. quickeruri 指 这个动作的 uri 地址。quicker 动作
    3. sql :结尾不要用分号,不要用 limit ,不要用 || 拼接字符串 (嵌入块好像不支持)。
  3. 在 quicker 中配置 siyuan token。

注意 :目前还不完善。

  1. 建议同时只打开一个使用 html 块对嵌入块进行分页查询的文档。(js 写得很烂,打开多了可能 dom 会获取)
  2. 要 html 块里面的 custom_id 每个 html 中要使用不一样的。(推荐使用 html 块 id,这样就都不同了)
  3. 查询的 sql 请注意,不要查询到自身或者同样使用 html 块进行分页查询的文档,以防套娃,导致程序崩溃。

AEM9KCAR2PA81RBKEH.gif

html 代码如下:

<html> <head> <style> #page_nav{width:100%;height:50px;display: flex; justify-content: center;} .page_btn{width:60px;display: inline-block; text-align: center;height: 50px;line-height: 50px;} #page_nav a{color: #8ab4f8; cursor: pointer;} #pageNum{width:50px;} </style> </head> <body> <div id="page_nav"> <form onload="formLoad()" readonly></form> <a id="first" class="page_btn" href="javascript:first()">首页</a> <a id="pre" class="page_btn" href="javascript:pre()">上一页</a> <input id="pageNum" name="pageNum" value="0" readonly placeholder="第几页"/> <a id="next" class="page_btn" href="javascript:next()">下一页</a> <p>查询条数 <select id="querycount" onchange="changeCount()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="50">50</option> </select> </p> </div> </body> <script> { const customID = '这个id为用户自己设置,用来唯一标识这个块的,建议使用html块id';//如:20220507204221-l9rthtz let Me = This(customID); console.log(Me); // 初始化,自动加载 pageNum 和pageCount init(); function init(){ var embeddedBlockId = Me.block.getAttribute('custom-qrkid'); if(!embeddedBlockId){ alert("需要在HTML块的属性中配置 :qrkid ! ") return; } var pageNum = document.querySelector(`div[data-node-id="${embeddedBlockId}"`).getAttribute('custom-pagenum'); var querycount = document.querySelector(`div[data-node-id="${embeddedBlockId}"`).getAttribute('custom-querycount'); if(!pageNum || !querycount){ return; } Me.shadowRoot.querySelector("#pageNum").value = parseInt(pageNum); Me.shadowRoot.querySelector("#querycount").value = parseInt(querycount); } /** * HTML 块中的脚本获取当前块相关信息 * @params {string} customID 内部定义的 ID * @returns {string} id 当前 HTML 块 ID * @returns {HTMLElement} block 当前 HTML 块 * @returns {HTMLElement} shadowRoot 当前 HTML 块 shadowRoot */ function This(customID) { let protyle = document.querySelector(`protyle-html[data-content*="${customID}"]`); if (protyle) { let block = protyle.parentElement.parentElement; return { id: block.dataset.nodeId, block: block, shadowRoot: protyle.shadowRoot, }; } else return null; } function changeCount(){ first() } function first(){ Me.shadowRoot.querySelector("#pageNum").value = 0; refreshEmbeddedBlock(); } function pre(){ var pageNum = parseInt(Me.shadowRoot.querySelector("#pageNum").value || 0); if(pageNum <= 0){ return; } Me.shadowRoot.querySelector("#pageNum").value = pageNum -1; refreshEmbeddedBlock(); } function next(){ var pageNum = parseInt(Me.shadowRoot.querySelector("#pageNum").value || 0); Me.shadowRoot.querySelector("#pageNum").value = pageNum + 1; refreshEmbeddedBlock(); } function refreshEmbeddedBlock() { var embeddedBlockId = Me.block.getAttribute('custom-qrkid'); var sql = Me.block.getAttribute('custom-sql'); var quickeruri = Me.block.getAttribute('custom-quickeruri'); if(!embeddedBlockId || !sql || !quickeruri){ console.log("embeddedBlockId:" + embeddedBlockId) console.log("sql:" + sql) console.log("quickeruri:" + quickeruri) alert("需要在HTML块的属性中配置 :qrkid , sql , quickeruri 这几个属性!! ") } var pageNum = parseInt(Me.shadowRoot.querySelector("#pageNum").value || 0); var querycount = parseInt(Me.shadowRoot.querySelector("#querycount").value || 0); if(querycount <= 0){ alert("请重新设置查询条数!") } sql = `${sql} limit ${pageNum*querycount} , ${querycount}` // alert(`embeddedBlockId:${embeddedBlockId}\n pageNum:${pageNum}\n querycount:${querycount}\n `) var jsonStr = JSON.stringify({qrkid:embeddedBlockId,sql:sql,pagenum:pageNum,querycount:querycount}); // console.log(jsonStr) // var full_quickeruri = `${quickeruri}?qrkid=${embeddedBlockId}&sql=${sql}`; var full_quickeruri = `${quickeruri}?${jsonStr}`; console.log(full_quickeruri); location.href =full_quickeruri; } } </script> </html>
  • 思源笔记

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

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

    24613 引用 • 100904 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
kobi
❤️❤️快速整理笔记,最重要的功能应当是什么呢❗❓

推荐标签 标签

  • 钉钉

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

    15 引用 • 67 回帖 • 293 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    36 引用 • 155 回帖 • 2 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 3 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    364 引用 • 1840 回帖 • 3 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 637 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • 小薇

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

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

    34 引用 • 467 回帖 • 759 关注
  • OneDrive
    2 引用 • 1 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 49 关注
  • Anytype
    3 引用 • 31 回帖 • 13 关注
  • 心情

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

    59 引用 • 369 回帖
  • TGIF

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

    289 引用 • 4492 回帖 • 657 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 2 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 16 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    179 引用 • 818 回帖 • 1 关注
  • OpenResty

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

    17 引用 • 51 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 803 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 379 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 138 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 2 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 407 关注
  • Access
    1 引用 • 3 回帖 • 5 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖