jeecg框架下，在同一页面有别的内容占据空间后， datagrid 表格自适应高度

最新推荐文章于 2023-03-31 13:50:10 发布

xie_candy

最新推荐文章于 2023-03-31 13:50:10 发布

阅读量799

点赞数

分类专栏： jeecg

本文链接：https://blog.csdn.net/xie_candy/article/details/103050280

版权

jeecg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一种在使用EasyUI datagrid时遇到的高度错位问题及其两种解决方案。一是将datagrid置于自定义高度的iframe中，二是通过CSS调整datagrid外层div的高度，使其自适应主页面布局。

摘要由CSDN通过智能技术生成

菜鸟一只，以下用词均是根据自己理解自创，不一定准确，如有错感谢指出，友好交流。

一般自适应的格式：

<div class="easyui-layout" fit="true">
    <div region="center" style="padding:0px;border:0px">
        <t:datagrid name="bSRepairOrderList" checkbox="false" height="50%" pagination="true" fitColumns="true" title="维修工单" actionUrl="bSEngineeringDrawingController.do?datagrid4" idField="id" fit="true" queryMode="group">
            <t:dgCol title="主键"  field="id"  hidden="true"  queryMode="single"  width="120"></t:dgCol>
 	    <t:dgCol title="操作" field="opt" width="12"></t:dgCol>
 	    <t:dgFunOpt title="详情" funname="detailGd(id,equipmentId,repairMethod)"   urlclass="ace_button" operationCode="details"/>
            <t:dgCol title="所属管理区"  field="mareaBm"  query="true" dictionary="ex_house_base_marea,marea_bm,marea_name" queryMode="single"  width="16" sortable="false"></t:dgCol>
      </t:datagrid>
    </div>
</div>

如上图这种其他内容+ datagrid表格的，高度会错位，因为自动获取的高度是包裹它的iframe的高度。因此解决该问题有两种思路：

1. 把 datagrid表格的内容独立出来，在主页面创建iframe，给iframe自定义高度，让datagrid在iframe里加载就可以了。

如：

2. 不用iframe，用css 改变 datagrid 表格外层div的高度。

这里解释一下，下图是chrome 的html 结构，<div class="box0">...</div> 是自定义的div。可以看到 <div class="panel layout-panel layout-panel-center" > 这个div的类 .layout-panel 设置了绝对定位，top：0; 自定义的div会被挡住，所以要先计算这个div的高度, 然后赋值给 top 。

datagrid表格的高度即 100% - 自定义div的高度，这样高度就可自适应了。

.panel.layout-panel.layout-panel-center{
    top: 110px !important;
}
.panel.layout-panel.layout-panel-center, .panel.datagrid {
    height: calc(100% - 110px);
}
.datagrid-wrap.panel-body{
    height: calc(100% - 30px) !important;
}