无限层级菜单
无限层级菜单
先展示html:
进入页面，初始化请求后台数据，加载最外层菜单：
packageAjax({url:'operations/getOrgData?parentId=0',type:"GET",data:'',dataType:'json'},function(data){//初始化
if (data && data.code === 0 ) {
var seldvel = '';
for (let index = 0; index < data.item.length; index++) {
seldvel+=''+data.item[index].name+' '
}
$('#side-menu').append(seldvel);
$('#side-menu').metisMenu();
}else{
var seldvel = ''+data.message+''
$('#side-menu').append(seldvel);
}
$('.chbox').click(function(evt){
// 阻止冒泡
evt.stopPropagation();
if($(this).prop("checked")){
$(this).prop("checked",true);
$(this).siblings().find('.chbox').prop("checked",true);
}else{
$(this).prop("checked",false);
$(this).siblings().find('.chbox').prop("checked",false);
}
});
})
当然packageAjax函数是自己封装的：
$(function() {
var packageAjax = function(params,callback){ //ajax请求数据
var _url = params.url,
_type = params.type,
_data = params.data,
_dataType = params.dataType,
_timeOut = 10000;
$.ajax({
url: _url,
type: _type,
data: _data,
dataType: _dataType,
// timeout: _timeOut,
success:function(data){
callback(data);
},
error:function(data){
alert(data.message)
},
complete:function(xhr,status){
xhr=null;
}
})
}
然后给初始化加载出来的菜单添加点击事件，每点击一次从后台获取当前菜单下的子菜单，其中包括菜单的checkbox选中状态都会根据父级菜单的选中与否，子集菜单自动生成。也对选中父级子集全选，子集有未选中父级disabled等菜单选择的几种状态：
$('#side-menu').on('click','a',function(e){
var orgUuid = $(this).parent().attr('data-uuid');
var that = this;
if (!$(that).data('clicked')) {
$('#side-menu').metisMenu('dispose');
packageAjax({url:'operations/getOrgData?parentId='+orgUuid,type:"GET",data:'',dataType:'json'},function(data){//拉子数据
// packageAjax({url:'./li.json',type:"GET",data:'',dataType:'json'},function(data){
var seldvel = '';
for (let index = 0; index < data.item.length; index++) {
seldvel+=''+data.item[index].name+' '
}
var uldvel = ''
$(that).parent().append(uldvel);
if ($(that).siblings('.chbox').prop("checked")) { //根据父级是否选中子集展示不同状态
$(that).next().find('.chbox').prop("checked",true)
} else {
$(that).next().find('.chbox').prop("checked",false)
}
$(that).parent().children('ul').show(500)
$(that).parent().addClass('mm-active');
$(that).attr('aria-expanded','true');
$(that).parent().children('ul').addClass('mm-collapse').addClass('mm-show');
// $('#side-menu').metisMenu();
$('.chbox').click(function(evt){ //点击选择和取消
// 阻止冒泡
evt.stopPropagation();
if($(this).prop("checked")){
$(this).prop("checked",true);
$(this).siblings().find('.chbox').prop("checked",true);
}else{
$(this).prop("checked",false);
$(this).siblings().find('.chbox').prop("checked",false);
}
var _siblings = $(this).parent().siblings().children('.chbox')
var result1 = true;
var result2 = true;
var result3 = true;
for (let index = 0; index < _siblings.length; index++) {
result1 = result1 && $(_siblings[index]).prop("checked"); //其他的都选中
result2 = result2 && !$(_siblings[index]).prop("checked"); //其他的都不选中
result3 = result3 && $(_siblings[index]).prop("checked"); //父级选中，子集有未选中的
}
if (!$(this).prop("checked")) { //有一个未选中，父级disabled
$(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
if (result2) { //所有的都未选中
$(this).parent().parent().prevAll('.chbox').removeAttr('disabled');
$(this).parent().parent().prevAll('.chbox').prop("checked",false);
}
} else{
if (result1) { //所有的都选中
$(this).parent().parent().prevAll('.chbox').removeAttr('disabled');
$(this).parent().parent().prevAll('.chbox').prop("checked",true);
}
if (!result3) {//父级选中，子集有未选中的
$(this).parent().parent().prevAll('.chbox').attr('disabled','disabled');
}
}
});
$('#side-menu').metisMenu();
// $(that).find('a').css({'color':'red'})
})
$(that).data('clicked', true);
} else{
$('#side-menu').metisMenu();
// $(that).find('a').removeAttr('color')
}
return false;
});
引入的插件：
整个代码：
Document