微客导航 » 文章资讯 » JS无限级导航菜单实现方法

JS无限级导航菜单实现方法

2023-09-01 21:46:04 172

这里使用layui渲染的导航

实体类

dept.java

privateintid;//id
privateStringdept_name;//部门名称
privateintpid;//上级部门id
privateintsort_num;//排序值
privateintcreate_id;//创建人
privateStringcreate_time;//创建时间
privateintmodify_id;//修改人
privateStringmodify_time;//最后修改时间
privateintis_del;//是否删除0未删除1已删除
privateintstatus;//status
privateStringremark;//remark
privateListdeptChild=newArrayList<>();//部门迭代

DeptMapper.java

ListselectDeptForJsonMenu();

DeptMapper.xml















SELECT*FROMsys_deptWHEREpid=0ANDis_del=0ORDERBYsort_num


select*FROMsys_deptwherepid=#{id}ANDis_del=0ORDERBYsort_num

DeptService.java

publicListselectDeptForJsonMenu(){
returnmapper.selectDeptForJsonMenu();
}

DeptController.java

@RequestMapping(value="selectDeptForJsonMenu",method={RequestMethod.GET,RequestMethod.POST})
@ResponseBody
publicListselectDeptForJsonMenu(){
returnservice.selectDeptForJsonMenu();
}

html引入layui.js,layui.css并加载element模块.

$(function(){
$.ajax({
method:'post',
url:getPath+"dept/selectDeptForJsonMenu",
dataType:'json',
success:function(data){
if(data.length>0){
varshowlist=$('');
showall(data,showlist);
$("#leftMenu").html(showlist);
}else{
$('#leftMenu').html('添加');
}
}
});
//json为json数据
//parent为最终html拼接内容
functionshowall(json,parent){
for(variinjson){
//有子节点遍历
if(json[i].deptChild.length>0){
//创建li
varli=$('');
$(li).append(''+json[i].dept_name+'');
$(li).append('').appendTo(parent);
//将UL选中回调
showall(json[i].deptChild,$(li).children().eq(1));
}
//无子级
else{
$('
').append(''+json[i].dept_name+'').appendTo(parent);
}
}
}
});

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。如果你想了解更多相关内容请查看下面相关链接

返回顶部
3162201930
czq8825@qq.com

JS无限级导航菜单实现方法

热门推荐

随机推荐