ADMINLTE 局部刷新布局

整理于http://bbs.csdn.net/topics/391846671
公司后台管理系统选用了ADMINLTE,咋一看还不错,但是最后都做完了,发现,哎呀不能局部刷新啊,核心功能没办法实现了,不能换框架,只能想办法改了,百度了一下,这位博主给的建议最好,分享给大家了,我自己把这个方法遗留的问题小小解决了下

首先,在主页面的

区的
中,增加一个iframe,如

    

注意:其中的main.html是默认显示的一个页面。name为menuFrame。
然后在侧边栏的链接处,设置标签的target属性为mengFrame,如下所示:

    
  • 用户管理
  • 最后就还剩iframe这块的高度问题,css控制不理想,所以推荐js控制
    1.获取到屏幕的高度window.screen.availHeight
    2.用屏幕高度减去头部的高度window.screen.availHeight -100px (100px改成你自己的头部高度)
    3.设置高度

        var hh=window.screen.availHeight -100
        $('.content').css('height',hh+'px')
    //.content是你iframe的父级元素
    

    如果你的ifram需要自适应高度,则用以下方法设置高度

     //iframe高度
    //'frameContent'子元素页面的最外层id
        function setIframeHeight(iframe) {
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.getElementById('frameContent').scrollHeight +20 || iframeWin.document.body.scrollHeight;
                }
            }
        };
    
        var iframe= document.getElementById('menuFrame');
        iframe.onload = function () {
            setIframeHeight(iframe);
        };
    

    大功告成,现在局部刷新爽歪歪咯

    你可能感兴趣的:(ADMINLTE 局部刷新布局)