easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条),每页显示1000行...

本文介绍了使用EasyUI数据表格时的几个实用技巧,包括如何固定表头避免滚动时消失、冻结特定列以便始终可见以及调整每页显示的行数等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近用多了easyui 之后还是觉得它的功能还是很强大的。它原有的功能就已经能够满足90%以上的界面需求。

1、当数据行很多时,会呈现垂直的滚动条,但是向下滚动,表头却被淹没了,这不符合人类偷懒的特点(我怎么可能记得住每列的数据代表的意思!),所以需要固定表头。

 datagrid.datagrid({
             fit: true

});

对,没错,就是这个属性,就这么简单!我也是看了网上的各位大神之后才懂。我看了多遍easyui的api(当然是中文的)没有!!下次看看英文原版(啊!我的英语水平)。

2、当数据列很多时,会出现水平滚动条。某些列时特定要一直显示的。

 datagrid.datagrid({
         frozenColumns: [[
                     { field: 'Name', title: '名称', width: 180 },
        ]]

});

 3、表格默认每页只显示几十行,最多也就50 ,之前遇到一个希望每页显示1000行的,说是总是翻页也很麻烦!好吧,现在我可以随便满足你了!

 datagrid.datagrid({
       pageList: [10, 20, 30, 40, 50, 100, 500, 1000],});

 

基本上有些默认参数都是需要的,现在贴上来,免得又忘记(我这记性不好的人啊~~)

  rownumbers: true,
        fit: true,
        idField: ID',
        striped: true,
        singleSelect: true,
        collapsible: true,
        pagination: true,
        pageSize: 500,
        pageList: [10, 20, 30, 40, 50, 100, 500, 1000],

转载于:https://www.cnblogs.com/yucaoye/p/7132969.html

### 解决 EasyUI DataGrid 显示水平滚动条的问题 为了确保 EasyUI DataGrid 正确显示水平滚动条,可以采取多种方式调整设置。以下是几种有效的方法: #### 方法一:修改 `scrollbarSize` 属性 通过将默认的滚动条尺寸从 18 修改为 0 可以消除不必要的空白区域[^1]。 ```javascript $('#datagrid').datagrid({ scrollbarSize: 0, }); ``` 这种方法适用于希望完全移除滚动条的情况,但在某些情况下可能会导致内容溢出问题。 #### 方法二:动态调整表格宽度 针对特定场景下的布局错位问题,在 JavaScript 中增加条件判断来微调表格的实际渲染宽度。 ```javascript if (_58e.width > _58d.width() + 20) { _590 += 18; } ``` 此代码片段用于修正由于浏览器自动计算错误而产生的额外空间,确保即使存在滚动条也不会影响整体视觉效果。 #### 方法三:强制启用水平滚动条 如果目标是在任何条件下都保持可见的水平滚动条,则可以在页面加载完成后执 CSS 样式注入操作[^4]。 ```javascript $(document).ready(function(){ $(".datagrid-body").css("overflow-x", "scroll"); }); ``` 这种方式简单直接,但可能会影响用户体验,特别是在不需要滚动的情况下也显示滚动条。 #### 方法四:优化列宽定义 合理规划各字段所占比例也是避免出现异常滚动的关键之一。对于较长的文字型数据建议给予足够的展示空间,并适当减少其他固定长度项的比例[^3]。 ```json columns : [[{ field : 'MDESC', title : '描述', align : 'center', width : 200 // 根据实际需求设定合适的宽度值 }]] ``` 以上四种策略可以根据具体应用场景灵活组合应用,从而达到最佳呈现效果的同时兼顾功能性与美观度的要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值