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

最新推荐文章于 2022-08-19 13:47:34 发布
最新推荐文章于 2022-08-19 13:47:34 发布
阅读量2.8w 收藏 13
点赞数 1
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyz318064860/article/details/80019705
版权
本文介绍了一个使用layui-tree实现的产品分类管理，通过Ajax异步请求动态添加树形菜单的子节点。当鼠标移入某个分类时，显示添加、编辑和删除操作图标，点击添加按钮会创建新的子分类，所有操作完成后更新前端展示。
摘要由CSDN通过智能技术生成

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

                                                                                                        大概效果如左图

    具体的实现是当我鼠标移入“长袖”这个分类时，出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为父类id 的一个子分类，成功后返回到前台，然后相应的节点下动态添加子节点，主要是通过append 来增加html元素

[html] view plain copy

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>多级分类管理</title>  
  6. <meta name="renderer" content="webkit">  
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  8. <meta name="format-detection" content="telephone=no">  
  9. <link rel="stylesheet" type="text/css"  
  10.     href="layui/css/layui.css" media="all">  
  11.   
  12. </head>  
  13.   
  14. <style>  
  15. .panel {  
  16.     margin-bottom: 0;  
  17. }  
  18.  i{  
  19.       
  20.     cursor: pointer !important ;   
  21.     cursor: hand !important;  
  22.  }   
  23.  body{  
  24.   
  25.  }  
  26.   
  27.   a:hover{  
  28.     background-color:#E6E6E6 ;  
  29.  }   
  30.   
  31. .active{  
  32.     background:#E6E6E6;  
  33. }  
  34. .hide{  
  35.     display:none;  
  36. }  
  37.   
  38. </style>  
  39. <body style="height:100%;">  
  40.   
  41.   
  42.   
  43.     <div    style="height:100%;">  
  44.                 <div class="panel panel-default"  
  45.                     style="
最低0.47元/天 解锁文章
Yoson_He
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui的tree如何实现动态加载_layui-tree实现Ajax异步请求后动态添加节点的方法
weixin_42181686的博客
12-30 1380
最近在弄一个产品分类管理，是一个树形菜单的形式，用的是layui-tree ,由于它并没有动态添加节点，所以只能自己刚了。大概效果如图体的实现是当我鼠标移入“长袖”这个分类时，出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为父类id 的一个子分类，成功后返回到前台，然后相应的节点下动态添加子节点，主要是通过append 来增加html元素多级分...
使用记录：layUI的treeTable树结构表格的使用
weixin_64096823的博客
06-21 373
layUI的treeTable树结构表格的使用记录，参考各位大神也没弄成简易版的，最后改嵌套式父子结构成功。
layui-tree实现Ajax异步请求后动态添加html元素
热门推荐
Hing's blog
03-29 3万+
最近在弄一个产品分类管理，是一个树形菜单的形式，用的是layui-tree ,由于它并没有动态添加节点，所以只能自己刚了。 大概效果如左图 具体的实现是当我鼠标移入“长袖”...
layui-tree如何实现懒加载以及动态局部渲染树节点
07-03 2856
众所周知，layui.tree的树形控件，在渲染树节点时，需要后台准备好整个组织树的数据；如果组织树的数据量特别大，页面渲染就特别慢。最近在狐小E智慧办公平台中，展示企业部门树时，就遇到这种问题；当时产品要求，部门树渲染要特别快，同时某部门下新增/删除了一个子部门时，要动态刷新，实时呈现；然而layui.tree的原始机制是，必须重新加载整个树的数据再渲染，这样就会导致展开的节点全收缩回去，而不是刚好展开到该父部门位置； 这样就有2个问题亟需优化： 1）部门树数据量大时，渲染慢。 2）父部门如何.
Layui插件Tree组件，Ajax异步添加删除
DarkMoonSH的博客
09-25 581
Tree.js插件要做一个点击添加按钮，弹出添加层，点击保存成功添加当前节点（不是刷新重新加载），原生代码是不支持中继操作。 要满足此功能只能手动修改tree.js源码。 找到 b.prototype.operate 方法的"add" == f 代码块进行修改。 代码到 if 结束 全部封装起来，把方法传递给前端。 前端对应的operate方法增加参数接收。 弹出层保存结束，如果成功就调用增加节点 ...
layui-tree使用ajax加载数据
zhujiarunm的博客
02-02 1万+
如题，这个问题困扰了我很久。总是出现各种问题 问题一： 你后台返回的数据中不能多出一些奇怪的数据，即便你该有的东西都有了（一开始我以为只要该有的参数不少就可以，现在看来不是） 问题二： 因为使用ajax求的数据，所以你可能会这么写 layui.tree({    elem : '#demo',    nodes :getTree() }); function getTree(
【layui-tree树形组件】ajax动态获取数据
qq_42468623的博客
08-19 1783
想把mysql数据表中的内容提取出来做成树状结构表示，于是有了这个尝试。很业余，但确实有用！欢迎大佬们指正
layui tree 加载慢_layui-tree如何实现懒加载以及动态局部渲染树节点
weixin_39905624的博客
12-19 1731
众所周知，layui.tree的树形控件，在渲染树节点时，需要后台准备好整个组织树的数据；如果组织树的数据量特别大，页面渲染就特别慢。最近在狐小E智慧办公平台中，展示企业部门树时，就遇到这种问题；当时产品要求，部门树渲染要特别快，同时某部门下新增/删除了一个子部门时，要动态刷新，实时呈现；然而layui.tree的原始机制是，必须重新加载整个树的数据再渲染，这样就会导致展开的节点全收缩回去，而不是...
layui tree子节点的加载处理
lssffy的博客
03-10 940
众所周知，layui.tree的树形控件，在渲染树节点时，需要后台准备好整个组织树的数据；如果组织树的数据量特别大，页面渲染就特别慢。 步骤1：源码修改 1：打开源码，在树的主渲染方法 r.render前，添加上用于加载child节点的方法r.children，代码如下： r.children = function (e, i, d) { var a = l.that[e]; return a.children(i, d) } 2：找到b.prototype.tree方法，在此方法前，添加两个用于懒加载
Layui实现动态加载Tree
Dawn.x的博客
07-01 6453
目录前言基本使用尾言 前言 有空研究了一下Layui，感觉相对于EasyUI来说，美观了不少，接下来给大家介绍一下它的基本使用 基本使用 Layui官网 去官网下载好Layui,里面有示例和css、js等文件 具体使用步骤： 要使用Layui,必须引入css文件和js文件： <link rel="stylesheet" href="css/layui.css" /> Layui官方文档是说有两种加载方式的，也就是：非模块化方式和模块化方式 两者区别就是： 非模块化方式所有模块一次性加载
layui-tree实现Ajax异步请求后动态添加节点的方法
12-13
体的实现是当我鼠标移入“长袖”这个分类时，出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为父类id 的一个子分类，成功后返回到前台，然后相应的节点下动态添加子...
layui-tree树形模板
05-30
通过监听这些事件，可以实现与后台的交互，例如在用户勾选节点时发送AJAX请求更新权限状态。 5. **异步加载**：对于数据量较大的树形结构，可以采用异步加载方式，只在首次加载根节点，当用户展开节点时再加载子...
bootstrap-treeview树节点实现动态加载（懒加载）
12-22
这意味着当用户首次访问树形视图时，只会加载根节点，当用户展开某个节点时，该节点的子节点才会在后台请求数据并动态添加到视图中。这样，即使树结构包含数千个节点，也不会对初始页面加载时间造成太大影响。 实现...
Ajax技术实现动态获取数据的树状菜单
02-21
在本示例中，"Ajax技术实现动态获取数据的树状菜单"是一个具体的实践应用，主要目标是创建一个动态加载数据的树状菜单，用户可以在不刷新页面的情况下查看和操作数据。 首先，我们来了解树状菜单的基本概念。树状...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
el-tree树懒加载嵌套el-tree
07-29
在`lazyLoad`方法中，我们可以通过异步请求获取子节点数据，并通过`resolve`方法返回给el-tree组件。 您可以根据实际情况修改请求子节点数据的方式，如使用AJAX请求或者从后端接口获取数据。同时，您也可以根据需求...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值