layui-tree实现Ajax异步请求后动态添加html元素

最近在弄一个产品分类管理，是一个树形菜单的形式，用的是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" 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="layui/layui.js"></script><script type="text/javascript">layui.use(['jquery','layer','element','form','tree'],function(){window.jQuery = window.$ = layui.jquery;window.layer = layui.layer;var form  =  layui.form;var elem = layui.element;var topcateid=0;  //为模拟顶级分类id用//初始化layer.treevar tree = layui.tree({elem: '#demo',nodes:[]     //这里可以通过后台获取（如ThinkPHP框架则可以通过后台拼接好，再生成模板变量类似{$tree}就可以）});   window.onload=function(){//删除layui-tree 自带的样式    $("i.layui-tree-branch").remove();$("i.layui-tree-leaf").remove();//添加操作的图标(即鼠标划过时显示的添加，修改，删除的按钮组)$("ul#demo").find("a").after("<i class='layui-icon add select hide ' )'></i>"+"<i class='layui-icon edit select hide'></i>"+"<i class='layui-icon del select hide'></i>");}//添加顶级分类$("#addcate").on("click",function(){layer.prompt({title: '输入分类名称，并确认', formType:0}, function(text, index){layer.close(index);//TODO 可以ajax到后台操作，这里只做模拟layer.load(2);setTimeout(function(){    layer.closeAll("loading");//手动添加节点，肯定有更好的方法=.=！这里的方法感觉有点LOW// li里面的pid属性为父级类目的id,顶级分类的pid为0topcateid= topcateid+1;$("ul#demo").append("<li  pid='0' id="+(topcateid)+">"+"<a ><cite>"+text+"</cite> </a>"+"<i class='layui-icon select hide add'></i>"+"<i class='layui-icon edit select hide'></i>"+"<i class='layui-icon del select hide'></i>"+"</li>");},1000)});
})//显示/隐藏 分类的操作栏
$("ul#demo").on({mouseover: function(event) {event.stopPropagation();$(this).children(".select").removeClass("hide")},mouseout: function(event) { event.stopPropagation(); $(this).children(".select").addClass("hide")}, },"li","a")//添加子分类
$("ul#demo ").on("click","li .add",function(){var pid = $(this).closest("li").attr("id");//将父级类目的id作为父类idvar that= $(this).closest("li");layer.prompt({title: '输入子分类名称，并确认', formType:0}, function(text, index){layer.close(index);//TODO 可以ajax到后台操作，这里只做模拟layer.load(2);setTimeout(function(){  layer.closeAll("loading");topcateid= topcateid+1;if(that.children("ul").length == 0){//表示要新增   i 以及 ul 标签that.prepend('<i class="layui-icon layui-tree-spread"></i>')that.append("<ul class='layui-show'><li  pid="+pid+"   id="+(topcateid)+"><a    ><cite>"+text+"</cite> </a><i  class='layui-icon select hide add' )'></i> <i    class='layui-icon edit select hide'></i> <i    class='layui-icon del select hide'></i></li></ul>")}else{that.children("ul").append("<li pid="+pid+"    id="+(topcateid)+"><a  ><cite>"+text+"</cite> </a><i  class='layui-icon select hide add' )'></i> <i    class='layui-icon edit select hide'></i> <i    class='layui-icon del select hide'></i></li>");}},1000)});     })
//重命名
$("ul#demo ").on("click","li .edit",function(){var node=$(this).parent().children("a").children("cite");var id=$(this).parent().attr("id")var that= $(this).closest("li");layer.prompt({title: '输入新的分类名称，并确认',value:node.text(), formType:0}, function(text, index){layer.close(index);//TODO 可以ajax到后台操作，这里只做模拟layer.load(2);setTimeout(function(){   layer.closeAll("loading");node.text(text);},1000)});  })
//删除分类
$("ul#demo ").on("click","li .del",function(){var that= $(this).closest("li");if(that.children("ul").length > 0){layer.msg("该分类下含有子分类不能删除")return;}var id=$(this).parent().attr("id")layer.confirm('确定要删除？该分类下的课程亦将删除！', {btn: ['删除','取消']
}, function(){//TODO 可以ajax到后台操作，这里只做模拟layer.load(2);setTimeout(function(){  layer.closeAll("loading");if((that.parent("ul").children("li").length == 1)&&(that.parent("ul").parent("li").children("i.layui-tree-spread").length=1)){//要把分类名前的三角符号和ul标签删除that.parent("ul").parent("li").children("i.layui-tree-spread").remove();          }that.remove()},1000)}); })
//打开/关闭菜单$("ul#demo").on({click:function(event){event.stopPropagation();event.preventDefault();if( $(this).parent().children("ul").hasClass("layui-show")){$(this).html("");$(this).parent().children("ul").removeClass("layui-show");return;}else{    $(this).html("");$(this).parent().children("ul").addClass("layui-show"); return;} return;}
},  'i.layui-tree-spread');  }); </script></body></html>

2018/1/22更新

源码我已经上传到github上了，有兴趣的可以看看 https://github.com/leeJqqq/layui-tree-ajax ,其实感觉写的可以更好，但是奈何能力有限，大家觉得有哪里写得不好或者有新的解决方案的，欢迎指正，而且听说layui2.0准备重构layui_tree,说不定新版本有动态插入的功能~大家可以留意layui的相关资讯。

layui-tree实现Ajax异步请求后动态添加html元素相关推荐

Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）
Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现) 对于ElementUI中使用ECharts在上一篇文章中已经说明具体使用方法一.效果图:(以每一个月的工业产值为例) 我们 ...
Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇
文章目录 Ajax异步请求(重渲染DOM元素时,如何自动调用并执行JS自定义函数[含代码])- 案例篇效果截图: 重要代码: 附:全部HTML代码: Ajax异步请求(重渲染DOM元素时,如何自动调 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
ajax异步请求刷新layui表格
ajax异步请求刷新Layui表格数据今天遇到一个小问题,向后端传一个bean插入到数据库后,在前端页面同步显示.刚开始直接用from表单把数据传给后台进行插入操作,但是这样前端不能及时接收到后端完 ...
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播的问题. 参考文章: (1)解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播 ...
php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...
ajax异步请求——form表单提交及表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...
AJAX 异步请求详细教程
文章目录 AJAX 异步请求简介 Jquery 版 Ajax $.ajax() -- Jquery提供的 ajax 函数注册验证用户名是否可用 $.get() 与 $.post() Ajax 返回 ...

layui-tree实现Ajax异步请求后动态添加html元素

2018/1/22更新

layui-tree实现Ajax异步请求后动态添加html元素相关推荐

最新文章

热门文章