登录 注册

请问如何自定义挂件 Query 查询结果的表格列宽？

本贴最后更新于 687 天前，其中的信息可能已经时移世异

参考帖子搜索挂件 query：设置字段长度问题，修改文件“工作空间\data\widgets\Query\src\script\module\config.js”；该贴反映一开始没有成功，后来不知如何就改成了。

现碰到类似情况，设置“maxlen: 16”、“limit: 'len'”等项目，查询结果表的列宽没有变化。尝试修改其他项目，如按钮“Query”高度，F5 刷新后显示更改成功，但反复修改几次后，挂件会出错：按钮“Query”变成很大矩形，且点击不生成查询结果，只能卸载挂件重新安装。

烦劳专家指点应如何修改配置文件，感谢！

Query 开发大佬若看到这个问题，能否在按钮“Query”旁加个选项面板，方便自定义结果表格的显示样式。

说明：思源版本 2.0.15

  • 思源笔记

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

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

    18587 引用 • 69148 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    6508 引用 • 29246 回帖 • 246 关注
1 操作
abc1206 在 2022-06-01 15:52:58 更新了该帖
20 悬赏
1 操作
7 回帖
3
2
2
627 94 92 220 15 14 189

相关帖子

7 回帖
请问如何自定义挂件 Query 查询结果的表格列宽？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • shuoying • • 1
    订阅者 支持者 捐赠者 恶龙

    列宽目前有两种方案, 一种是为部分列设置固定的列宽, 另一种是通过表格块的自定义属性配合主题样式设置表格的样式, 可以设置为每一列自动宽度, 你想使用哪一种方案呀 ❓

    1 回复
  • abc1206 •
    订阅者 作者

    大佬能讲下第 1 种方案吗？

    1 回复
  • shuoying •
    订阅者 支持者 捐赠者 恶龙
    1. 打开 data\widgets\custom.js 文件, 如果没有则新建
    2. 在该文件中写入如下信息并保存, 可以根据需要设置部分字段的宽度 
      export const config = {
    query: {
        style: {
            column: {
                // 列样式, 自定义宽度的字段可以设置为 '{: style="width: 512px"}'
                content: '',
                fcontent: '',
                markdown: '',
                created: '',
                updated: '',
                type: '',
                hpath: '',

                id: '',
                parent_id: '',
                root_id: '',
                hash: '',
                box: '',
                path: '',
                name: '',
                alias: '',
                memo: '',
                tag: '',
                length: '',
                subtype: '',
                ial: '',
                sort: '',
            },
        },
    },
};
    1 回复
  • abc1206 • • 4 评论
    订阅者 作者

    感谢大佬！试了下，没成功。

    custom.js 代码如下：

    export const config = {
    query: {
        style: {
            column: {
                // 列样式, 自定义宽度的字段可以设置为 '{: style="width: 512px"}'
                content: '{: style="width: 50px"}',
                fcontent: '',
                markdown: '',
                created: '',
                updated: '',
                type: '',
                hpath: '',

                id: '',
                parent_id: '',
                root_id: '',
                hash: '',
                box: '',
                path: '',
                name: '',
                alias: '',
                memo: '',
                tag: '',
                length: '',
                subtype: '',
                ial: '',
                sort: '',
            },
        },
    },
};

    查询代码如下：

    SELECT  
    a.content AS __3__链接内容,
    b.content AS __2__上级内容,
    c.content AS __1__文档
FROM
    blocks As a
    INNER JOIN blocks AS b ON a.parent_id = b.id
    INNER JOIN blocks AS c ON a.root_id = c.id 
WHERE
    (
	(a.type = 'p' OR a.type = 'h') AND a.markdown LIKE '%20210930074618-zyk18yh%'
    )  
ORDER BY
    a.hpath

    页面刷新、新建文档、重启思源都试了，没成功。新建查询第 1 次点击“Query”按钮，背景变红色没出结果；第 2 次点击，背景变绿色，结果表列宽仍是老样子：自适应每列最长内容，随后查询点击均如此。

    哦哦, 自定义字段就没法使用该方案设置列宽了~
    shuoying •
    @shuoying 请问该方案适用哪种情况下设置列宽？
    abc1206 •
    @abc1206 适用于默认查询, SQL 格式为 SELECT * FROM blocks ...
    shuoying • • 1
    @shuoying 知道了，谢谢大佬！
    abc1206 •
  • drawone • • 1 • 2 评论
    付费者

    image.png最好启用自定义样式属性

    谢谢！之前尝试在 custom.js 中启用该属性，显示没效果。
    abc1206 •
    请问"value: 'auto'"的其他选项是什么？如"value: '50px'"可行吗？
    abc1206 •
  • drawone • • 1 • 1 评论
    付费者

    在 custom.js 中还可以这样赋值：value:'{: style="200px"}'

    在 Query按钮块 的自定义属性中可以这样赋值：

    image.png

    谢谢大佬！
    abc1206 •
  • abc1206 •
    订阅者 作者

    找到一个变通方法：通过限制内容长度来限制列宽，不修改挂件配置。

    挂件 Query 查询结果表自定义列宽

    1 操作
    abc1206 在 2022-06-03 10:09:33 更新了该回帖
请输入回帖内容 ...
abc1206
回帖
100
 帖子
33
 积分
27036

近期热议

推荐标签 标签

  • Jenkins

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

    51 引用 • 37 回帖
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 693 关注
  • 分享

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

    242 引用 • 1746 回帖 • 1 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    15 引用 • 7 回帖 • 7 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    131 引用 • 1114 回帖 • 150 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    131 引用 • 3639 回帖
  • CentOS

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

    238 引用 • 224 回帖 • 1 关注
  • V2Ray
    1 引用 • 15 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • 30Seconds

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

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

    这是一个不能说的秘密。

    120 引用 • 597 回帖 • 2 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    51 引用 • 190 回帖
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    324 引用 • 1395 回帖 • 2 关注
  • GitBook

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

    3 引用 • 8 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 602 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 96 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    303 引用 • 777 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 597 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖 • 1 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 25 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • OkHttp

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

    16 引用 • 6 回帖 • 54 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    1 引用 • 11 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    14 引用 • 7 回帖 • 1 关注

最新标签