使用递归遍历一个结构树（layui）
使用递归遍历一个结构树（layui）
1.后台代码
@PostMapping("selectDepts")
public List2.前端代码
var msg=null;
var msg1=null;
var index = layer.load(2, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
loadtree()
function loadtree(){
$.ajax({
type: "post",
url: serverUrl + "/Dept/selectDepts",
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function(res) {
layer.close(index);
var data = [{}];
layui.use(['tree','util'], function() {
var tree = layui.tree,
layer = layui.layer,
util = layui.util,
data1 = res
tree.render({
elem: '#test9',
id:'treedept',
data: data1,
showCheckbox: true,//显示多选框
showLine:true,//显示线
accordion:true,//手风琴模式
drag:true,//拖拽
skin: "laySimple" , // laySimple主题风格
showSearch: true,//显示搜索框
edit: ['add', 'update','del','banuser'], //操作节点的图标,
click: function(obj) {
},
operate:function(obj){
var type = obj.type; //得到操作类型：add、edit、del
var data = obj.data; //得到当前节点的数据
var elem = obj.elem; //得到当前节点元素
if(type==='del'){
var arr=obj.data;
if(arr.id>0&&(!typeof arr.id!= 'undefined')){
if(arr.children.length>0){
layer.confirm('该部门下有其它子部门是否确认删除?', function(index){
deleteDept(arr.id);
if(msg1.trim()=="删除成功！"){
elem.remove();
}
htmlInfo(msg1);
layer.close(index);
loadtree()
});
}else{
layer.confirm('是否确认删除?', function(index){
deleteDept(arr.id);
if(msg1.trim()=="删除成功！"){
elem.remove();
}
htmlInfo(msg1);
layer.close(index);
loadtree()
});
}
}else{
elem.remove();
}
}
},drag:function(obj){
console.log(obj);
}
});
util.event('lay-demo', {//多选框获取数据
getChecked: function(othis){
var idList=[];
var arr= document.getElementsByClassName("layui-form-checked");
for (var i = 0; i < arr.length; i++) {
let a=arr[i];
if($(a).parent().parent().parent().attr("data-id")!="undefined"){
idList.push($(a).parent().parent().parent().attr("data-id"));
}
}
if(idList.length==0){
layer.msg("请至少选择一个部门进行删除");
}else{
layer.confirm('是否确认删除?', function(index){
deleteDeptList(idList); //删除函数
htmlInfo(msg);
layer.close(index);
loadtree()
});
}
}
});
});
}
});
}
3.数据库设计
红线框住的是根节点，parent_id是根据dept-id获取的
