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 相关文章推荐
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
Vue路由权限控制解析
Nov 09 Javascript
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读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
js实现简单的打印表格
2020/01/15 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python中的变量和作用域详解
2016/07/13 Python
Django验证码的生成与使用示例
2017/05/20 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
详解python中的异常和文件读写
2021/01/03 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
小学生母亲节演讲稿
2014/05/07 职场文书
庆元旦活动总结
2014/07/09 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript