一个自动适应窗口大小的easyui控件datagrid的扩展方法

最新推荐文章于 2021-09-15 22:41:27 发布

长沙三毛

最新推荐文章于 2021-09-15 22:41:27 发布

阅读量1.5k

点赞数

分类专栏： jQuery与Javascript 文章标签： javascript easyui datagrid

本文链接：https://blog.youkuaiyun.com/hulihui/article/details/82354842

版权

jQuery与Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个针对 EasyUI 的 datagrid 控件的自定义方法，该方法可以使 datagrid 控件根据当前浏览器窗口的大小自动调整其高度和宽度。通过简单的调用即可实现 datagrid 的自适应布局。

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

前端使用easyui控件datagrid时，经常需要调整大小，以适应当前窗口的布局。下面是一个datagrid控件的扩展方法，可以定义底边和右边宽度以适应当前窗口的大小布局。

$.extend($.fn.datagrid.methods,
{
    zoom: function (jq, footer, right)
    {
        var _zoom = function (jq, footer, right)
        {
            if (!footer) footer = 30;
            if (!right) right = 30;

            var h = $(window).height() - footer;
            var w = $(window).width() - right;

            $(jq).datagrid('resize', { height: h, width: w }); 
        }
        _zoom(jq, footer, right);

        window.onresize = function ()
        {
            setTimeout(function () { _zoom(jq, footer, right); }, 300); 
        }
    },
});

实际使用时的代码如下（默认底边30、右边30）：

$('#dg').datagrid('zoom');
$('#dg').datagrid('zoom',100);
$('#dg').datagrid('zoom',100,50);