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

前端使用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);

猜你喜欢

转载自blog.csdn.net/hulihui/article/details/82354842