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

2024-11-26 21:28:05

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

大概效果如图

体的实现是当我鼠标移入“长袖”这个分类时，出现三个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 下拉菜单树的实例代码

1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" cont
使用layui+ajax实现简单的菜单权限管理及排序的方法

**简单的例子使用的layui框架,并没有使用他的ztree插件,只用ajax配合sql完成最简单的一二级菜单权限控制及其排序功能. 先看数据库设计:** user表: role表: menu表: user_role表: role_menu表: 在这里 menu的id依然是主键,多了mid也就是菜单id,pare_menu_id也就是这个菜单对应的父级菜单的菜单id(mid):没有的话,就是0,也就是一级菜单,在这里,一级菜单的mid必须满足为整千数,或者万也行,其子菜单在mid+999范围内:
使用layui实现树形结构的方法

树形结构在项目中使用是比较,下面我来介绍一种layui做树形结构的方法树形结构需要获得的数据有父id,所以数据库需要有父id: 后台代码: @RequestMapping(value = "/lists") public void getList( HttpServletResponse response) { List list = this.companyService.getList(); String[] exclude={"Groups"}; JsonU
layui-tree实现Ajax异步请求后动态添加节点的方法

最近在弄一个产品分类管理,是一个树形菜单的形式,用的是layui-tree ,由于它并没有动态添加节点,所以只能自己刚了. 大概效果如图体的实现是当我鼠标移入"长袖"这个分类时,出现三个icon (如图),按"增加"按钮,会发送ajax异步请求到后台,在数据库库中增加以"长袖"为父类id 的一个子分类,成功后返回到前台,然后相应的节点下动态添加子节点,主要是通过append 来增加html元素 <!DOCTYPE html> <
关于Ajax异步请求后台数据进行动态分页功能

ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据.数据总条数.总页数.当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端. 请看如下例子: /** * * @param page 当前页 */ function getData(page){ var schoolid = $("#schoolid option:selecte
原生JavaScript实现Ajax异步请求

在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只需要ajax功能,这样引入Jquery比较不划算. 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题. JavaScript实现Ajax异步请求简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpReq
SpringMVC环境下实现的Ajax异步请求JSON格式数据

一环境搭建首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem
Ajax异步请求技术实例讲解

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分
ajax异步请求详解

做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.com学习,教程完善,适合初学者快速入门. jQuery的引用,可以通过下载js文件导入,或通过外部导入 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"
浅谈Jquery中Ajax异步请求中的async参数的作用

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi
解决ajax异步请求返回的是字符串问题

1.返回结果差异 js获取后打印res.code无结果.因为返回数据格式不正确. php文件添加header头: header('Content-Type:application/json;'); 或者.j s 添加 contentType: "application/json; charset=utf-8", dataType: "json", $.ajax({ url:'../data/insert_category.php?article_type=' + v
Ajax异步请求的五个步骤及实战案例

目录前言 1.建立xmlHttpRequest异步对象 2.创建HTTP请求(设置请求方法和URL) 3.发送数据 4.设置回调函数 5.在回调函数中对不同的响应状态进行处理案例实现总结前言 AJAX(Asynchronous JavaScript and XML):是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这就意味着可以在不重新加载整个网页的情况下,对网页的局部进行更新. 1.建立xmlHttpRequest异步对象
Ajax异步请求JSon数据(图文详解)

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图

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

相关推荐

随机推荐