Web笔记··By/蜜汁炒酸奶

AdminLTE实现局部刷新

前言

AdminLTE是一个基于boostrap的前端模板,里面集成了好多插件,可以说方便又臃肿,毕竟不是所有插件都用得到,。好不容易找到个喜欢的前端模板,无奈每次点击菜单都会整个页面刷新一次,网上找了半天也没找到一个喜欢的局部刷新的解决方法。只好自己去啃js了。由于修改了原生adminlte.js部分,可能不适用于所有布局,此处暂且以原生布局情况下为例,同时暂且仅对二级菜单做了局部刷新,未处理一级菜单包含链接时的状态。

AdminLTE实现局部刷新

正文

效果图如下:

AdminLTE实现局部刷新

1、Tree.prototype._setUpListeners

主要需要修改菜单树的Tree.prototype._setUpListeners方法,这里可是说是用来区分一级菜单和二级菜单的方法。此处根据是否包含fa-circle-o该class区分,以便区别对待。其中,当为二级菜单时调用mainMenuClickFunc方法处理局部刷新事件,代码如下:
  Tree.prototype._setUpListeners = function (param) {
    var that = this
$(this.element).on('click', this.options.trigger, function (event) {
    if($($(this)[0].firstChild).hasClass("fa-circle-o")){
        mainMenuClickFunc.call(this);
    }else {
        that.toggle($(this), event)
    }
})

}

2、mainMenuClickFunc

这是一个用于处理二级菜单时的方法:
function mainMenuClickFunc(param) {
$( ".sidebar-menu .treeview li").removeClass("active");
$($(this).parent()).addClass("active");

if(!$(this).offsetParent().hasClass("active")){
    $( ".sidebar-menu .treeview").removeClass("active");
    $(this).offsetParent().addClass("active");
}
var controller = $(this).attr("menu-controller");

$(".content-wrapper").html("");


$.ajax({
    url: basePath  + controller,
    data:param?param:{},
    success: function (d) {
        var html = $(d);
        $(".content-wrapper").html(html);


    }
});

}

3、菜单结构

最后附上修改后的菜单实现模板
  <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
  <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">菜单</li>
                <li class="active treeview">
                    <a href="#">
                        <i class="fa fa-dashboard"></i> <span>用户管理</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li class="active"><a href="javascript:void(0);" menu-controller="user/home.do"><i class="fa fa-circle-o"></i> 用户浏览</a></li>
                        <li><a href="javascript:void(0);"  menu-controller="user/add.do"><i class="fa fa-circle-o"></i> 添加用户</a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-files-o"></i>
                        <span>文章管理</span>
                        <span class="pull-right-container">
                          <span class="label label-primary pull-right">4</span>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a  href="javascript:void(0);" menu-controller="post/home.do"><i class="fa fa-circle-o"></i>文章概览</a></li>
                        <li><a  href="javascript:void(0);" menu-controller="post/add.do"><i class="fa fa-circle-o"></i> 添加文章</a></li>
                    </ul>
                </li>
            </ul>
        </section>
    </aside>

附录

本文源代码

为照顾纯前端同学,地址已改为纯前端实现。

-2017-08-21

DEMO下载

tip:若评论后看不到,刷新下就可以了。

[ttr2v]

AdminLTEDEMO

很多人想要将js单独提取,无奈我一直没时间研究和修改。这里感谢HalfWater完成了对js的提取,按其所说“其实将menuInit()方法放入一个独立的js文件即可,并在index中引入该js即可。 如果menuJson需要后台动态生成,使用ajax调用后台请求,并做ajax全局变量赋值,已在index中加入注释。”,其源码可查看:HalfWater/WebDemos

[/ttr2v]

 

源码加群也可直接获取啦:

官方群
Preview
Loading comments...
147 条评论
  • comment-avatar

    Thanks for sharing.

  • comment-avatar

    感谢分享

  • comment-avatar

    感谢分享

  • comment-avatar

    感谢分享

  • comment-avatar

    感谢分享

  • comment-avatar

    感谢分享

  • comment-avatar

    感谢楼主分享

  • comment-avatar

    感谢楼主分享

  • comment-avatar

    学习一下,谢谢楼主

  • comment-avatar

    学习学习

example
Preview