问题图片:
由于在布局中,表格上面有操作按钮,导致表格底部的页码无法固定在底部。
解决方式:
正确使用easyui layout
问题代码:
<div data-options="collapsible:true,dosize:true,split:true" class="easyui-panel table-layout" title="demo表格" style="height:75%;width:100%">
自行添加了div进行布局的扩充
<div class="columns" >
<button type="button" class="btn btn-primary btn-sm" onClick="add()">
<i class="fa" aria-hidden="true"></i>添加
</button>
<button type="button" class="btn btn-danger btn-sm" onclick="batchRemove()">
<i class="fa" aria-hidden="true"></i>删除
</button>
</div>
自行添加了div进行布局的扩充
<table id="jxNotify" >
中间省略
</table >
</div>
按钮那一行是自己多添的,造成下面的高度超出了窗体高度,分页显示不全。
正确的实现方式:
<div class="easyui-layout">
<div data-options="region:'north'" style="height:100px">
<!-- 官方文档写的清楚,没说清楚 -->
<!-- 我的理解是这里面不能有自己的结构,如果需要插入更多的内容,
请再用div class="easyui-layout"包起来,里面再分区,
如果上中下左右还不能满足,那么就再包一层 -->
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',collapsed:true" style="width:180px">
自己要添加的内容。包裹起来,本文最开始的两个表格操作按钮就放在此处即可实现
</div>
<div data-options="region:'center'">
<table id="datagrid2"></table>
</div>
</div>
</div>
</div>
最后实现后的效果: