Skip to content
网游世界
网游世界

吾生有涯,而知无涯。

  • 首页
  • PHP
    • ThinkPHP
    • FastAdmin
    • webman
  • JavaScript
    • jQuery
    • AdminLTE
  • Free Pascal
  • Java
    • JeeSite
    • 若依
    • ruoyi-vue-pro
  • 其它
    • 操作系统
    • 树莓派
    • 前端
    • Null
  • 关于
网游世界

吾生有涯,而知无涯。

JeeSite 列表添加横向滚动条

3Vshej, 2024年1月17日 周三2024年1月23日 周二

在开发中,如何列表字段太多时,有些列会显示不全,这时候想展示全怎么办?

推荐使用第二种方法。


方法一:添加横向滚动条

通过在 id=”dataGrid” 的表格元素外部添加一层 div 并定义好样式。(这种方式用于强制定义表格宽度)

<style>
    #tableScrollbar {
        position: relative !important;
        clear: both !important;
        zoom: 1 !important;
        overflow-x: auto !important;
    }
    #tableScrollbar table {
        width: 1360px !important;
    }
</style>

添加好后,dataGrid 表格外部 class 为 tableScrollbar 的 div。

<div id="tableScrollbar">
    <table id="dataGrid"></table>
</div>

另外,对某一列固定宽度,需要指定宽度值(width 属性)。

{header:'${text("对接人")}', name:'linkman', index:'a.linkman', width:150, align:"center"}

方法二:固定列

dataGrid,通过增加,

frozenCols: true, // 冻结列,锁定列,固定列,在 colModel 指定 frozen: true 方式来实现。

autoGridWidth: true, // 自动表格宽度(设置为false后,不自动调整表格宽度)

固定列时,推荐冻结首尾列。

推荐使用第二种方法。

关于固定列:

  • 它与多表头冲突,不建议同时使用
  • 固定列,在启用编辑表格时,不适用(如文本框等形式)
  • 必须放在 columnModel 首位且在一起

相关文章:

  1. JeeSite 列表中增加日期范围筛选 在开发中,需要进行日期范围筛选,那么可以按以下方法来进行。...
  2. JeeSite 导出数据 默认情况下,JeeSite 会自动生成导出代码,但有时候忘记了。这里介绍如何手动添加导出功能。...
  3. JeeSite 重置按钮不生效 测试人员在测试列表搜索时,设置搜索条件,点击“查询”按钮功能正常,点击“重置”按钮时,却没反应。...
  4. JeeSite 通过模板添加列表状态筛选 在 JeeSite 流程表单中,列表中可以通过流程状态来筛选不同状态的流程(审批)信息。...
Java JeeSite JeeSite 框架列表页滚动条

文章导航

Previous post
Next post

近期文章

  • Android Studio Gradle 配置国内镜像
  • 为什么重新发明轮子
  • ruoyi-vue-pro 匿名访问
  • VUE 中接收 code 异常
  • 关于 AI

归档

  • 2025 年 4 月
  • 2025 年 3 月
  • 2025 年 2 月
  • 2025 年 1 月
  • 2024 年 12 月
  • 2024 年 11 月
  • 2024 年 10 月
  • 2024 年 9 月
  • 2024 年 8 月
  • 2024 年 7 月
  • 2024 年 6 月
  • 2024 年 5 月
  • 2024 年 4 月
  • 2024 年 3 月
  • 2024 年 2 月
  • 2024 年 1 月
  • 2023 年 12 月
除非特殊说明,本站作品采用知识共享署名 4.0 国际许可协议进行许可。
豫公网安备 41010402002622号 豫ICP备2020029609号-3
©2025 3Vshej