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

原创
2014/03/19 17:38
阅读数 6.5K

  这个问题困扰我很久了,我试过好多方法,例如设置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); 

    });  

});


展开阅读全文
打赏
0
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
0
分享
返回顶部
顶部