EasyUI datagrid在Layout中动态适应问题

最新推荐文章于 2020-02-15 10:27:19 发布

lxq0426

最新推荐文章于 2020-02-15 10:27:19 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java Web学习记录文章标签： datagrid easyui Layout

本文链接：https://blog.youkuaiyun.com/lxq0426/article/details/51606322

Java Web学习记录专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何解决EasyUI Layout中Datagrid在调整窗口大小时无法自适应的问题。通过监听面板的onResize事件，并使用Datagrid的resize方法动态调整Datagrid的宽度和高度，实现了良好的用户体验。

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

easyui Layout中改变大小时对应datagrid大小自适应问题
由于center的layout中 datagrid被嵌入了一个div，当左右拖动west的Layout时，在Layout center中的datagrid宽度不变（可能是datagrid外面被嵌套了一个div吧，当没有div时好像是可以动态适应的），导致用户体验问题，通过panel的onResize事件去处理，将动态取得宽度，通过datagrid 的resize方法设置到datagrid中，可现实动态适应宽度和高度

<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" title="群体" style="width:500px;">
<table id="grouppushlist" style="padding-top: 0px;"></table>
</div>

<div id='Content_table' data-options="region:'center',title:'操作展示',iconCls:'icon-ok'">
<div id="personallist" class="easyui-resizable" style="display:none;width:inherit;height:inherit;" >
<table id="pushlist" ></table>
</div>

</div>
</div>

以下实现事件监听:

$(document).ready(function(){

$('#Content_table').panel({
onResize:function(width, height){
$('#personallist').width(width);
$('#personallist').height(height);
$('#pushlist').datagrid('resize',{width:width});
}

});

}