首页
所有分类
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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vue项目如何打包之项目打包优化（让打包的js文件变小）
Apr 30 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
自定义组件(1) KVM(1) vue-cli3.x(1) watch(1) vue-router-link(1) Yolov5(1) TimePickerView(1) 项目打包(2) Jmerte(1) scss(1)
You might like
改造一台复古桌面收音机
2021/03/02 无线电
我的论坛源代码(三)
2006/10/09 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
采用call方式实现js继承
2014/05/20 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
js微信支付实现代码
2016/12/22 Javascript
Mac 安装 nodejs方法（图文详细步骤）
2017/10/30 NodeJs
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
js实现开关灯效果
2020/03/30 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python中的id()函数指的什么
2017/10/17 Python
Python实现简单的语音识别系统
2017/12/13 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python-for循环的内部机制
2020/06/12 Python
Python中的面向接口编程示例详解
2021/01/17 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Stylenanda中文站：韩国一线网络服装品牌
2016/12/22 全球购物
美国购买韩国护肤和美容产品网站：Althea Korea
2020/11/16 全球购物
Python的两道面试题
2013/06/29 面试题
银行求职信
2014/05/31 职场文书
党的群众路线教育实践活动心得体会（教师）
2014/10/31 职场文书
成本会计实训报告
2014/11/05 职场文书
求职自我评价怎么写
2015/03/09 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server