使用JavaScript怎么实现一个无限级导航菜单-创新互联
这篇文章给大家介绍使用JavaScript怎么实现一个无限级导航菜单，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
繁峙ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为
创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！JavaScript是什么
JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
实体类
dept.java
private int id; //id
private String dept_name; //部门名称
private int pid; //上级部门id
private int sort_num; //排序值
private int create_id; //创建人
private String create_time; //创建时间
private int modify_id; //修改人
private String modify_time; //最后修改时间
private int is_del; // 是否删除 0 未删除 1 已删除
private int status; //status
private String remark; //remark
private List deptChild = new ArrayList<>(); //部门迭代
DeptMapper.java
List selectDeptForJsonMenu();
DeptMapper.xml
SELECT * FROM sys_dept WHERE pid = 0 AND is_del = 0 ORDER BY sort_num
select * FROM sys_dept where pid = #{id} AND is_del = 0 ORDER BY sort_num
DeptService.java
public List selectDeptForJsonMenu(){
return mapper.selectDeptForJsonMenu();
}
DeptController.java
@RequestMapping(value = "selectDeptForJsonMenu",method={RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public List selectDeptForJsonMenu(){
return service.selectDeptForJsonMenu();
}html 引入layui.js,layui.css 并加载element模块.
$(function(){
$.ajax({
method:'post',
url:getPath+"dept/selectDeptForJsonMenu",
dataType:'json',
success:function(data){
if(data.length > 0){
var showlist = $('');
showall(data, showlist);
$("#leftMenu").html(showlist);
}else{
$('#leftMenu').html('添加') ;
}
}
});
//json为json数据
//parent为最终html拼接内容
function showall(json, parent) {
for (var i in json) {
//有子节点 遍历
if (json[i].deptChild.length > 0) {
//创建li
var li = $('');
$(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);
}
}
}
});关于使用JavaScript怎么实现一个无限级导航菜单就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网站标题：使用JavaScript怎么实现一个无限级导航菜单-创新互联
标题来源：
http://csdahua.cn/article/cchpdj.html
