jquery的datagrid自适应浏览器的宽度

2019独角兽企业重金招聘Python工程师标准>>>

  这个问题困扰我很久了，我试过好多方法，例如设置datagrid的width为auto，还有设置datagrid的fit为true，但是这种方法不行，然后我在网上发现有人写了一个扩展方法，链接为http://www.myexception.cn/web/410060.html。

按照这个链接提供的方法不能使高度按照内容来设置，因此我进行了修改，修改的代码如下：

/** 

 * JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。 

 */  

$.fn.extend({  

    /** 

     * 修改DataGrid对象的默认大小，以适应页面宽度。 

     *  

     * @param heightMargin 

     *            高度对页内边距的距离。 

     * @param widthMargin 

     *            宽度对页内边距的距离。 

     * @param minHeight 

     *            最小高度。 

     * @param minWidth 

     *            最小宽度。 

     *  

     */  

    resizeDataGrid : function( widthMargin, 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', {  

            width : width  

        });  

    }  

});  

$(function() { 

    //datagrid数据表格ID 

    var datagridId = 'test';  

     var datagridId2='spdata';

    // 第一次加载时自动变化大小  

    $('#' + datagridId).resizeDataGrid(20, 800);  

     $('#' + datagridId2).resizeDataGrid(20,800);  

    // 当窗口大小发生变化时，调整DataGrid的大小  

    $(window).resize(function() {  

        $('#' + datagridId).resizeDataGrid(20, 800);  

          $('#' + datagridId2).resizeDataGrid(20,800); 

    });  

});

转载于:https://my.oschina.net/u/659230/blog/209736