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

这里使用layui渲染的导航

实体类

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('

//将UL选中 回调

showall(json[i].deptChild, $(li).children().eq(1));

}

//无子级

else {

$('

').append(' '+json[i].dept_name+'').appendTo(parent);

}

}

}

});

总结

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