easyui datagrid数据表格根据窗口大小自动调节表格的高度和宽度

使用easyui datagrid的时候浏览器窗口大小改变的时候自动调整datagrid的大小，实现自适用宽度和高度。

1.先写一个自定义的函数：

//datagrid宽度高度自动调整的函数
$.fn.extend({
    resizeDataGrid: function (heightMargin, widthMargin, minHeight, minWidth) {
        var height = $(document.body).height() - heightMargin;
        var width = $(document.body).width() - widthMargin;
        height = height < minHeight ? minHeight : height;
        width = width < minWidth ? minWidth : width;
        $(this).datagrid('resize', {
            height: height,
            width: width
        });
    }
});

页面初始化的时候加入如下代码：

$(document).ready(function(){
    //这里写的边界高度可以把头部和底部的高度加上
    var heightMargin = 0;
    //如果有左侧导航也可以添加宽度边界
    var widthMargin = 0;
    // 第一次加载时和当窗口大小发生变化时，自动变化大小
    $('#grid').resizeDataGrid(heightMargin, widthMargin, 200, 200);
    //窗口大小改变时，调用
    $(window).resize(function () {
        $('#grid').resizeDataGrid(heightMargin, widthMargin, 200, 200);
    });

    //这里的200是设置的最小宽度和高度
});