最近在弄一个产品分类管理，是一个树形菜单的形式，用的是layui-tree ,由于它并没有动态添加节点，所以只能自己刚了。
大概效果如图
体的实现是当我鼠标移入“长袖”这个分类时，出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为父类id 的一个子分类，成功后返回到前台，然后相应的节点下动态添加子节点，主要是通过append 来增加html元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级分类管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css"
href="layui/css/layui.css" rel="external nofollow" media="all">
</head>
<style>
.panel {
margin-bottom: 0;
}
i{
cursor: pointer !important ;
cursor: hand !important;
}
body{
}
a:hover{
background-color:#E6E6E6 ;
}
.active{
background:#E6E6E6;
}
.hide{
display:none;
}
</style>
<body style="height:100%;">
<div style="height:100%;">
<div class="panel panel-default"
style=" position:fixed; width: 250px; height:800px; overflow:auto;">
<div class="panel-body" style=" ">
<h4 style="text-align: center;">分类管理</h4>
<ul unselectable="on" id="demo"
style="margin-top: 30px; -moz-user-select: none; -webkit-user-select: none;"
onselectstart="return false;" ></ul>
<button id="addcate" class="layui-btn layui-btn-primary" style="margin-top:20px; margin-left:28px; width:70%;">添加分类</button>
</div>
</div>
</div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/layui.js">
以上这篇layui-tree实现Ajax异步请求后动态添加节点的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。