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

本文介绍如何使用EasyUI的Datagrid组件实现表头固定、特定列冻结及自定义每页显示行数,适用于数据展示场景,提升用户体验。

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

$table.datagrid({
fit: true

});

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

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

$table.datagrid({
frozenColumns: [[
{ field: ‘Name’, title: ‘名称’, width: 180 },
]]

});

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

$table.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]

建议还是对比着 EasyUI 看。
在这里插入图片描述

### 如何在 EasyUI DataGrid 中正确添加垂直水平滚动条 为了实现在 EasyUI DataGrid 中正确添加垂直水平滚动条的功能,可以通过调整 `datagrid` 的属性以及绑定事件来完成。以下是具体实现方式: #### 垂直滚动条的设置 当数据量较大时,EasyUI DataGrid 默认会自动显示垂直滚动条。然而,如果需要手动控制其为或者确保表头固定,可以使用以下配置项[^1]: - 设置 `rownumbers: true` 和 `fitColumns: false` 来启用号并禁用列宽自适应。 - 使用 `pagination: true` 启用分页功能,从而减少单次加载的数据量。 代码示例如下: ```javascript $("#datagridId").datagrid({ rownumbers: true, fitColumns: false, pagination: true, pageSize: 1000, // 每页显示1000 pageList: [1000], // 只允许选择每页1000 }); ``` #### 水平滚动条的设置 对于水平滚动条的支持,则需注意以下几个方面[^2]: - 如果表格中的某些列宽度超出容器范围,水平滚动条将会自然显现。 - 需要确保 `singleSelect: true` 或其他选项不会干扰布局计算。 - 动态调整窗口大小时,可通过监听窗口变化事件重新设定 DataGrid 宽高。 动态调整逻辑可参考如下代码片段: ```javascript $(window).resize(function() { $("#datagridId").datagrid("resize", { height: $(window).height(), width: $(window).width() }); }); ``` #### 组合应用与优化体验 有时用户希望即使翻页后仍保持当前视图状态不变,比如保留滚动条的位置。此时可以在 `onLoadSuccess` 方法里加入额外处理逻辑[^3]^: ```javascript onLoadSuccess: function(data) { var grid = this; setTimeout(function(){ $(grid).datagrid('scrollTo', 0); }, 0); // 进一步操作以防止页面跳动 $(this).datagrid("selectRow", 0); $(this).datagrid("unselectRow", 0); } ``` 上述方法能够有效解决因刷新引起的滚动丢失问题,并提升用户体验的一致性和流畅度。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值