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事件串连执行多个处理过程的方法
Mar 09 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
深入解读Node.js中的koa源码
Jun 17 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
js实现抽奖效果
2017/03/27 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python实现最长公共子序列
2018/05/22 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python exit出错原因整理
2020/08/31 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
学生党支部先进事迹
2014/02/04 职场文书
产品包装策划方案
2014/05/18 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
体育运动口号
2014/06/09 职场文书
面试自我评价范文
2014/09/17 职场文书
三好学生事迹材料
2014/12/24 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
婚宴新娘致辞
2015/07/28 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
Python基础之进程详解
2021/05/21 Python