AdminLTE实现局部刷新

前言

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

正文

效果图如下:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后台全栈之路

基于汇编的 C/C++ 协程 - 切换上下文

既然本系列讲的是基于汇编的 C/C++ 协程,那么这篇文章我们就来讲讲使用汇编来进行上下文切换的原理。

54260
来自专栏Danny的专栏

【SSH快速进阶】——探索Hibernate对象的三种状态:Transient、Persistent、Detached

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

12220
来自专栏枕边书

Gotorch - 多机定时任务管理系统

前言 最近在学习 Go 语言,遵循着 “学一门语言最好的方式是使用它” 的理念,想着用 Go 来实现些什么,刚好工作中一直有一个比较让我烦恼的问题,于是用 Go...

70590
来自专栏安恒网络空间安全讲武堂

Python编写渗透工具学习笔记二 | 0x02利用FTP与web批量抓肉鸡

0x02利用FTP与web批量抓肉鸡 脚本要实现的目标和思路: 先尝试匿名登录ftp,当匿名登录失败时再尝试用用户/密码爆破登录,登录成功后,脚本会搜索ftp中...

1.8K70
来自专栏FreeBuf

分析一个用于传播Hancitor恶意软件的Word文档(第一部分)

最近,TechHelpList将一个用于传播Hancitor恶意软件的Word文档上传到了VirusBay,并概述了与之相关的站点、C2服务器以及由该文档所释放...

27310
来自专栏张善友的专栏

ASP.NET2.0应用中定制安全凭证之实践篇

一、方案架构   本方案架构很简单——它用一个Web服务来包装ASP.NET 2.0提供者并且为远程客户暴露该凭证管理,你甚至还能在该架构中加上一些失去的功能。...

20480
来自专栏烂笔头

Python爬虫—破解JS加密的Cookie

目录[-] 前言 在GitHub上维护了一个代理池的项目,代理来源是抓取一些免费的代理发布网站。上午有个小哥告诉我说有个代理抓取接口不能用了,返回状态521...

83470
来自专栏Golang语言社区

Gotorch - 多机定时任务管理系统

题图 by wahno from Instagram 前言 最近在学习 Go 语言,遵循着 “学一门语言最好的方式是使用它” 的理念,想着用 Go 来实现些什么...

38480
来自专栏知识分享

二,ESP8266 GPIO和SPI和定时器和串口(基于Lua脚本语言)

我们写lua用这个软件 http://pan.baidu.com/s/1kVN09cr 密码:pfv7 ? 如果点击的时候提示安装,,安装就行,,如果没有提示呢...

33540
来自专栏前端说吧

Gulp安装流程、使用方法及cmd常用命令导览

47660

扫码关注云+社区

领取腾讯云代金券