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

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

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

结合思源的 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>
  • 思源笔记

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

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

    23025 引用 • 92624 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 禅道

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

    5 引用 • 15 回帖 • 101 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用
  • TGIF

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

    288 引用 • 4485 回帖 • 663 关注
  • gRpc
    11 引用 • 9 回帖 • 69 关注
  • OpenResty

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

    17 引用 • 39 关注
  • Unity

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

    25 引用 • 7 回帖 • 159 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3454 回帖 • 190 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖
  • uTools

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

    6 引用 • 14 回帖
  • Latke

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

    71 引用 • 535 回帖 • 789 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    946 引用 • 943 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 632 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 4 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • abitmean

    有点意思就行了

    27 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 772 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 2 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 364 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 1 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 50 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 2 关注
  • Ngui

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

    7 引用 • 9 回帖 • 394 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖