layui-tree实现Ajax异步请求后动态添加html元素
2017-03-29 10:13
1016 查看
最近在弄一个产品分类管理，是一个树形菜单的形式，用的是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.tree
var 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为0
topcateid= 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作为父类id
var 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>
大概效果如左图
具体的实现是当我鼠标移入“长袖”这个分类时，出现三个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.tree
var 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为0
topcateid= 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作为父类id
var 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更新
源码我已经上传到coding上了，有兴趣的可以看看 https://coding.net/u/LeeJIn/p/layui_tree ,其实感觉写的可以更好，但是奈何能力有限，大家觉得有哪里写得不好或者有新的解决方案的，欢迎指正，而且听说layui2.0准备重构layui_tree,说不定新版本有动态插入的功能~大家可以留意layui的相关资讯。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 通过javascript实现动态添加删除表格的行
- 熟悉IBatisNet的兄弟，探讨下 如何实现 动态添加SQL语句，查询出随时所需的信息
- 使用jQuery加DIV实现可以动态添加的金字塔结构
- Html元素动态添加方法
- 用ExtJS 实现动态载入树（Load tree）
- 浅谈如何利用PB实现动态添加菜单（原创）
- 用ExtJS 实现动态载入树（Load tree）
- 动态生成Html元素实现Post操作（createElement）
- 在Css样式表中添加javascript，实现动态效果
- 一个很苯的方法实现TreeView节点的动态添加
- listbox控件和linkbutton的综合实现选择项的动态添加
- javascript动态生成表格，并实现对表格行的添加和删除
- 向HTML元素动态添加事件！
- javascript实现动态添加内容
- [导入]用ExtJS 实现动态载入树（Load tree）
- 如何实现服务器端下页面动态添加JavaScript脚本
- 使用jQuery加DIV实现可以动态添加的金字塔结构
- javascript实现的动态添加表单元素input,button等(appendChild)
- 使用MYSQL、PHP和FLEX实现上传图片，动态在DataGrid中添加下载按钮和上传的图片.
- php+javascript+css 实现动态添加数据行