easyui datagrid 使用技巧汇总
Posted yqj234
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui datagrid 使用技巧汇总相关的知识,希望对你有一定的参考价值。
1 表头固定
1 当数据行很多时,会呈现垂直的滚动条,但是向下滚动,表头却被淹没了,所以需要固定表头。
datagrid.datagrid(
fit: true
);
2 冻结表列
2 当数据列很多时,会出现水平滚动条。某些列时特定要一直显示的(冻结列)。
datagrid.datagrid(
frozenColumns: [[
field: 'Name', title: '名称', width: 180 ,
]]
);
3 修改每页显示行数
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],
4 显示左右滚动条
一:设置 fitColumns : false
二:columns 中,设置所有 fixed : true,但是留其中一个设置 width : 100(根据实际需求)
注意如下几个点就行:
1、数据网格(DataGrid)所在的table属性上级div无需设置width;
2、.datagrid属性:fitColumns为false 或者不填
3、在style中给.datagrid-body设置 overflow:auto;
1 2 3 4 5 6 7 8 |
|
效果如下:左边(frozenColumns)固定,右边(columns)超出表单属性可移动
以上是关于easyui datagrid 使用技巧汇总的主要内容,如果未能解决你的问题,请参考以下文章