天天看點

jQuery EasyUI的Gridview的自适應視窗的擴充

代碼如下

* 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

繼續閱讀