layui-tree实现Ajax异步请求后动态添加节点的方法


Posted in Javascript onSeptember 23, 2019

最近在弄一个产品分类管理,是一个树形菜单的形式,用的是layui-tree ,由于它并没有动态添加节点,所以只能自己刚了。

大概效果如图

layui-tree实现Ajax异步请求后动态添加节点的方法

体的实现是当我鼠标移入“长袖”这个分类时,出现三个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="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>

以上这篇layui-tree实现Ajax异步请求后动态添加节点的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue多页面项目中路由使用history模式的方法
Sep 23 #Javascript
JS随机密码生成算法
Sep 23 #Javascript
详解mpvue开发微信小程序基础知识
Sep 23 #Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 #Javascript
layui树形菜单动态遍历的例子
Sep 23 #Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 #Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 #Javascript
You might like
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
javascript闭包入门示例
2014/04/30 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
python批量提取word内信息
2015/08/09 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Django进阶之CSRF的解决
2018/08/01 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
tensorflow 实现数据类型转换
2020/02/17 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
个人自荐信
2013/12/05 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
九年级语文教学反思
2014/02/04 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
党员大会主持词
2014/04/02 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
内勤岗位职责
2015/02/10 职场文书
慰问信格式
2015/02/14 职场文书
校园广播站开场白
2015/06/01 职场文书
高中军训感想
2015/08/07 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2016年社区服务活动总结
2016/04/06 职场文书