jQuery EasyUI的Gridview的自适应窗口的扩展

最新推荐文章于 2022-04-20 15:38:18 发布

巅峰白杨

最新推荐文章于 2022-04-20 15:38:18 发布

阅读量377

点赞数

分类专栏：涨知识文章标签： EasyUI Gridview

本文链接：https://blog.youkuaiyun.com/qq_33961062/article/details/80223022

版权

涨知识专栏收录该内容

8 篇文章

订阅专栏

代码如下

 * JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。 
 */
    $.fn.extend({
        @* 
         * 修改DataGrid对象的默认大小，以适应页面宽度。 
         *  
         * @param heightMargin 
         *            高度对页内边距的距离。 
         * @param widthMargin 
         *            宽度对页内边距的距离。 
         * @param minHeight 
         *            最小高度。 
         * @param minWidth 
         *            最小宽度。 
         *  
         *@
        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
            });
        }
    });

    $(function () {
        //datagrid数据表格ID 
        var datagridId = 'tt';

        // 第一次加载时自动变化大小  
        $('#' + datagridId).resizeDataGrid(20, 60, 600, 800);

        // 当窗口大小发生变化时，调整DataGrid的大小  
        $(window).resize(function () {
            $('#' + datagridId).resizeDataGrid(20, 60, 600, 800);
        });
    });

又是一项新技能get