首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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异步请求后动态添加节点的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

Yoson_He

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
JS event使用方法详解
Apr 28 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 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
apply(1) pandas(7) 数据处理(2) agg(1) 读取(1) mp3Play(1) 音频(1) 数据保存(1) 数组(5) 矩阵(1)
You might like
Phpbean路由转发的php代码
2008/01/10 PHP
PHP的加密方式及原理
2012/06/14 PHP
Laravel5中contracts详解
2015/03/02 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
详解python中的json和字典dict
2018/06/22 Python
python学生信息管理系统（初级版）
2018/10/17 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
阿拉伯世界最大的电子商务网站：Souq沙特阿拉伯
2016/10/28 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
党员公开承诺事项
2014/03/25 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
永不妥协观后感
2015/06/10 职场文书
员工保密协议范本，您一定得收藏！很有用！
2019/08/08 职场文书