前言
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、菜单结构
最后附上修改后的菜单实现模板
菜单
用户管理
用户浏览添加用户
文章管理
4
文章概览添加文章
