easyui datagrid 使用技巧汇总

Posted 2022-01-10 yqj234

 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

<style>     .datagrid-body         overflow:auto;          .datagrid-header-row > td         border-bottom: 1px solid #DFDFDF !important;      </style>

效果如下：左边（frozenColumns）固定，右边（columns）超出表单属性可移动

 

---