easyui datagrid设置fit: true后，高度不自动调整，且分页栏显示不全

最新推荐文章于 2022-01-16 18:30:31 发布

wxfei19840610

最新推荐文章于 2022-01-16 18:30:31 发布

阅读量2k

点赞数

文章标签： easyui js html

本文链接：https://blog.youkuaiyun.com/wxfei19840610/article/details/108769398

版权

当为easyui datagrid设置fit: true时，遇到高度无法自动调整和分页栏显示不完整的问题。解决方法包括使用JS动态调整高度并响应页面缩放，以及修改toolbar中div的布局结构，避免嵌套影响分页栏显示。

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

easyui datagrid设置fit: true后，高度没有自动调整

解决方法：用js调整，并做到页面缩放时，datagrid根据页面大小自动调整大小

function initGridHeight(obj) {
    if (obj != null) {
        $(window).on("resize", function () {
            try {
                var win_h = $(window).height();
                var height = Math.floor((win_h) * 0.95);
                var options = $(obj).datagrid('options');
                if (options != null) {
                    if (options.fit) {
                        $(obj).parents("div.datagrid-wrap:first").css({
                            height: (height + 30) + 'px'
                        });
                        $(obj).datagrid("resize");
                    }
                }
            } catch (e) {
                return false;
            }
        }).trigger("resize");
    }
}

调用：

initGridHeight("#table");

高度调整完成后，分页栏显示不全

原因：由于datagrid的toolbar影响，导致分页栏显示不全。
解决方法：toolbar中外层div不要再直接嵌套一层div。

<div id="toolbar" style="background: #fafafa;">
        <div id="searchTool" style="display: inline; float: left; padding-top: 2px;">
        </div>
</div>

改为：

<div id="toolbar" style="background: #fafafa;">
        <%--<div id="searchTool" style="display: inline; float: left; padding-top: 2px;">--%>
         <%--</div>--%>
</div>