layui tree

最新推荐文章于 2024-06-24 10:40:17 发布
最新推荐文章于 2024-06-24 10:40:17 发布
阅读量739 收藏
点赞数
文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu_nana/article/details/116977839
版权 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>基本演示</legend>
</fieldset>
<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
</div>
 
<div id="test12" class="demo-tree-more"></div>
         
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规用法</legend>
</fieldset>
 
<div id="test1" class="demo-tree demo-tree-box"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>无连接线风格</legend>
</fieldset>
<div id="test13" class="demo-tree-more"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>仅节点左侧图标控制收缩</legend>
</fieldset>
 
<div id="test2" class="demo-tree"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>手风琴模式</legend>
</fieldset>
 
<div id="test4" class="demo-tree"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>点击节点新窗口跳转</legend>
</fieldset>
 
<div id="test5" class="demo-tree"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>开启复选框</legend>
</fieldset>
 
<div id="test7" class="demo-tree"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>开启节点操作图标</legend>
</fieldset>
 
<div id="test9" class="demo-tree demo-tree-box" style="width: 200px; height: 300px; overflow: scroll;"></div>
        
<script src="static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use(['tree', 'util'], function(){
  var tree = layui.tree
  ,layer = layui.layer
  ,util = layui.util
  
  //模拟数据
  ,data = [{
    title: '一级1'
    ,id: 1
    ,field: 'name1'
    ,checked: true
    ,spread: true
    ,children: [{
      title: '二级1-1 可允许跳转'
      ,id: 3
      ,field: 'name11'
      ,href: 'https://www.layui.com/'
      ,children: [{
        title: '三级1-1-3'
        ,id: 23
        ,field: ''
        ,children: [{
          title: '四级1-1-3-1'
          ,id: 24
          ,field: ''
          ,children: [{
            title: '五级1-1-3-1-1'
            ,id: 30
            ,field: ''
          },{
            title: '五级1-1-3-1-2'
            ,id: 31
            ,field: ''
          }]
        }]
      },{
        title: '三级1-1-1'
        ,id: 7
        ,field: ''
        ,children: [{
          title: '四级1-1-1-1 可允许跳转'
          ,id: 15
          ,field: ''
          ,href: 'https://www.layui.com/doc/'
        }]
      },{
        title: '三级1-1-2'
        ,id: 8
        ,field: ''
        ,children: [{
          title: '四级1-1-2-1'
          ,id: 32
          ,field: ''
        }]
      }]
    },{
      title: '二级1-2'
      ,id: 4
      ,spread: true
      ,children: [{
        title: '三级1-2-1'
        ,id: 9
        ,field: ''
        ,disabled: true
      },{
        title: '三级1-2-2'
        ,id: 10
        ,field: ''
      }]
    },{
      title: '二级1-3'
      ,id: 20
      ,field: ''
      ,children: [{
        title: '三级1-3-1'
        ,id: 21
        ,field: ''
      },{
        title: '三级1-3-2'
        ,id: 22
        ,field: ''
      }]
    }]
  },{
    title: '一级2'
    ,id: 2
    ,field: ''
    ,spread: true
    ,children: [{
      title: '二级2-1'
      ,id: 5
      ,field: ''
      ,spread: true
      ,children: [{
        title: '三级2-1-1'
        ,id: 11
        ,field: ''
      },{
        title: '三级2-1-2'
        ,id: 12
        ,field: ''
      }]
    },{
      title: '二级2-2'
      ,id: 6
      ,field: ''
      ,children: [{
        title: '三级2-2-1'
        ,id: 13
        ,field: ''
      },{
        title: '三级2-2-2'
        ,id: 14
        ,field: ''
        ,disabled: true
      }]
    }]
  },{
    title: '一级3'
    ,id: 16
    ,field: ''
    ,children: [{
      title: '二级3-1'
      ,id: 17
      ,field: ''
      ,fixed: true
      ,children: [{
        title: '三级3-1-1'
        ,id: 18
        ,field: ''
      },{
        title: '三级3-1-2'
        ,id: 19
        ,field: ''
      }]
    },{
      title: '二级3-2'
      ,id: 27
      ,field: ''
      ,children: [{
        title: '三级3-2-1'
        ,id: 28
        ,field: ''
      },{
        title: '三级3-2-2'
        ,id: 29
        ,field: ''
      }]
    }]
  }]
  
  //模拟数据1
  ,data1 = [{
    title: '江西'
    ,id: 1
    ,children: [{
      title: '南昌'
      ,id: 1000
      ,children: [{
        title: '青山湖区'
        ,id: 10001
      },{
        title: '高新区'
        ,id: 10002
      }]
    },{
      title: '九江'
      ,id: 1001
    },{
      title: '赣州'
      ,id: 1002
    }]
  },{
    title: '广西'
    ,id: 2
    ,children: [{
      title: '南宁'
      ,id: 2000
    },{
      title: '桂林'
      ,id: 2001
    }]
  },{
    title: '陕西'
    ,id: 3
    ,children: [{
      title: '西安'
      ,id: 3000
    },{
      title: '延安'
      ,id: 3001
    }]
  }]
  
  //模拟数据2
  ,data2 = [{
    title: '早餐'
    ,id: 1
    ,children: [{
      title: '油条'
      ,id: 5
    },{
      title: '包子'
      ,id: 6
    },{
      title: '豆浆'
      ,id: 7
    }]
  },{
    title: '午餐'
    ,id: 2
    ,checked: true
    ,children: [{
      title: '藜蒿炒腊肉'
      ,id: 8
    },{
      title: '西湖醋鱼'
      ,id: 9
    },{
      title: '小白菜'
      ,id: 10
    },{
      title: '海带排骨汤'
      ,id: 11
    }]
  },{
    title: '晚餐'
    ,id: 3
    ,children: [{
      title: '红烧肉'
      ,id: 12
      ,fixed: true
    },{
      title: '番茄炒蛋'
      ,id: 13
    }]
  },{
    title: '夜宵'
    ,id: 4
    ,children: [{
      title: '小龙虾'
      ,id: 14
      ,checked: true
    },{
      title: '香辣蟹'
      ,id: 15
      ,disabled: true
    },{
      title: '烤鱿鱼'
      ,id: 16
    }]
  }];
 
  //基本演示
  tree.render({
    elem: '#test12'
    ,data: data
    ,showCheckbox: true  //是否显示复选框
    ,id: 'demoId1'
    ,isJump: true //是否允许点击节点时弹出新窗口跳转
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
  });
  
  //按钮事件
  util.event('lay-demo', {
    getChecked: function(othis){
      var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
      
      layer.alert(JSON.stringify(checkedData), {shade:0});
      console.log(checkedData);
    }
    ,setChecked: function(){
      tree.setChecked('demoId1', [12, 16]); //勾选指定节点
    }
    ,reload: function(){
      //重载实例
      tree.reload('demoId1', {
        
      });
      
    }
  });
 
  //常规用法
  tree.render({
    elem: '#test1' //默认是点击节点可进行收缩
    ,data: data1
  });
  
  //无连接线风格
  tree.render({
    elem: '#test13'
    ,data: data1
    ,showLine: false  //是否开启连接线
  });
 
  //仅节点左侧图标控制收缩
  tree.render({
    elem: '#test2'
    ,data: data1
    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
    ,click: function(obj){
      layer.msg(JSON.stringify(obj.data));
    }
  });
  //手风琴模式
  tree.render({
    elem: '#test4'
    ,data: [{
      title: '优秀'
      ,children: [{
        title: '80 ~ 90'
      },{
        title: '90 ~ 100'
      }]
    },{
      title: '良好'
      ,children: [{
        title: '70 ~ 80'
      },{
        title: '60 ~ 70'
      }]
    },{
      title: '要努力奥'
      ,children: [{
        title: '0 ~ 60'
      }]
    }]
    ,accordion: true 
  });
 
  //点击节点新窗口跳转
  tree.render({
    elem: '#test5'
    ,data: data
    ,isJump: true  //link 为参数匹配
  });
 
  //开启复选框
  tree.render({
    elem: '#test7'
    ,data: data2
    ,showCheckbox: true
  });
 
  //开启节点操作图标
  tree.render({
    elem: '#test9'
    ,data: data1
    ,edit: ['add', 'update', 'del'] //操作节点的图标
    ,click: function(obj){
      layer.msg(JSON.stringify(obj.data));
    }
  });
});
</script>

</body>
</html>

 

1°叁柒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LayUI中的内置模块之 树形组件文档 - layui.tree
daimeijin的博客
08-14 7553
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 树形组件文档 在一段漫长的雪藏后，我们在 layui 2.5.0 的版本中重新创作了 tree，以便它能够更加适用于绝大多数业务场景，而风格依然遵循 layui 独有的极简和清爽。需要提醒的是，如果
merkle tree
hi！
04-09 1444
test
LayUI—tree树形结构的使用
热门推荐
小马同学
09-01 10万+
树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理一下。 官网地址：https://www.layui.com/v1/doc/modules/tree.html 先看一下显示的效果图。 点击节点右面会显示对应部门的详情信息，可以修改。可以自定义按钮添加部门，也可以直接...
Layui----动态树
m0_74934282的博客
07-12 1350
LayUI的动态树（Dynamic Tree）是LayUI框架中提供的一种功能强大且易于使用的组件，用于在网页中展示具有层级结构的数据，LayUI是一款基于jQuery的前端开发框架，动态树是LayUI框架中提供的一个组件，用于在网页中展示具有层级结构的数据，如树形菜单。动态树组件可以实现数据的展开和折叠、节点的选中和取消选中等功能，并提供了丰富的事件和方法，方便开发者对树节点进行操作和控制。通过动态树组件，开发者可以方便地实现树状结构的数据展示和交互操作，提升用户体验。
layui框架学习（30：树形模块）
gc_2299的博客
06-29 1534
学习并记录layui框架中内置模块的树形模块的函数、参数设置方式。
LayUi之树形结构的详解（附有全案例代码）
m0_74315688的博客
07-12 2935
怎么灵活的使用LayUi?怎么用LayUi完成树形结构中的数据交互？一篇全部解决，手把手教学！！
树
kong_xz的博客
03-09 3049
一、 树的定义形式定义：树：T={D,R}。D是包含n个节点的有穷集合（n≥0）。当n=0时为空树，否则关系R满足以下条件:       有且仅有一个节点d0∈D，它对于关系R来说没有前驱节点，节点d0称作树的根节点。除节点d0外，D中的每个节点对于关系R来说都有且仅有一个前驱节点。D中每个节点对于关系R来说可以有零个或多个后继节点。递归定义：树是由n（n≥0）个节点组成的有限集合（记为T）。其中...
layui tree 插件 点击父类不会全选子类。
04-09
有时候开发树形菜单权限管理，选择父节点不想子节点全部选中，经过我的修改现在可以做到。你可以试试。只需要覆盖项目 tree.js就可以。 layui2.5.4版本
layui tree懒加载实例.rar
02-03
在IT行业中，layui是一个流行的前端UI框架，它提供了丰富的组件，包括我们今天要讨论的“tree”组件。layui treeview是用于展示层级关系数据的一种视图，尤其适用于组织结构、目录树或者文件系统等场景。当数据量较...
layui tree.js树形组件优化（默认选中项过多时加载缓慢问题解决）
05-08
有需要的直接下载替换掉start\layui\lay\modules目录下的tree.js文件即可
Layui tree 255 可本地执行，样式齐全的demo.rar
11-11
在提供的压缩包"255 可本地执行，样式齐全的demo.rar"中，包含了Layui的tree组件的示例代码，这将帮助我们更深入地理解和使用Layui Tree。 首先，Layui Tree是一个用于展示层级关系数据的组件，通常用于目录结构、...
layui tree树结构源码
12-21
在layui中，树形结构（tree）是一种常见的数据展示形式，常用于层级关系的组织，如组织架构、目录结构等。本知识点将深入解析layui tree树结构的源码，帮助你更好地理解和运用这个功能。 layui tree的实现主要依赖...
Layui之动态树(树形菜单)详解
ChatYU的博客
07-12 3278
树形菜单的展示及编写，菜单栏的级别
layui使用tree实现树形下拉菜单
踮脚敲代码
10-31 1万+
一. 效果演示 看到效果图是不是有点小心动，接下来附上源码、呈上教程 layui实现树形下拉列表源码，点击下载 二. 插入css样式、引用js插件 <link rel="stylesheet" href="layui/css/layui.css" media="all"> <style type="text/css"> .treeSelect .layui-select-title span { line-height: 38px; } .layui-form-sel
Layui组件Tree的使用技巧
天涯芳草
07-17 6980
场景一：@RequestBody 接收Json数组对象及对象参数中有数组参数，如下图，我们希望后台接收一个包含json对象的数据，数据格式如下: ） （上图获取到的数据如下:） [ {"id":1,"title":"一级1","filed":null,"checked":true,"spread":true,"href":null,"children":[{"id":3,"title":"二级1-1 可允许跳转","filed":null,"che...
Layui动态树详解
m0_74018330的博客
07-12 2371
Layui动态树详解一、什么是动态树形？二、Layui动态树形基本使用三、动态加载数据4.案列1.实体类2.dao方法3.子实现类4.jsp页面 前言 在前端开发过程中，树形控件是比较常用的控件之一。而Layui框架中，也提供了基于jQuery的树形控件。除了普通的静态树形外，Layui还提供了动态树形。在本篇博客中，我将详细介绍Layui的动态树形控件。 一、什么是动态树形？ 动态树形是指树形结构中的节点是动态生成的，而不是在页面初始化时就固定好的。在用户进行某些操作（如展开或折叠节点、勾选或取消勾
Layui的tree使用
qq_44484973的博客
05-29 4625
前言：文档中有详细参数说明 ：https://www.layui.com/doc/modules/tree.html 导入js和css文件，假如文件路径为404，查看文件是否路径上的错误，或者是否加上项目的根路径，例如：“${pageContext.request.contentPath}/../src/css/layui.xx” 初始化layuitree，文档中有。 Script写法： function generateTree() { $.ajax({ url: "...
LayUI之树形权限菜单
liaozhixiangjava的博客
07-12 852
可以自定义每个节点的样式、图标、文本等内容，以及节点的展开和折叠操作。4.
记录一次有关layui的bug修复，监听table内的input的动态变化并且修改表格
最新发布
U12Euphoria的博客
06-24 321
今天发现一个离职同事留下的bug，table的删除逻辑有问题。仔细一看，同事是通过获取table的行data的name数据的来配合删除的。但由于他在table内实现的input是动态变化的且没有实时修改表格的data，在此记录一下修改方案。
Layui tree
09-21
Layui tree是Layui框架中的一个动态树组件，用于展示具有层次结构的数据。树形结构是一种层次化的数据结构，由节点和边组成，节点代表存储单元，边代表节点之间的关系。在Layui tree中，根节点是整个树的起点，可以有多个子节点，每个子节点又可以有自己的子节点，如此递归下去，形成树状的结构。 Layui tree组件可以在文件系统、组织机构、数据分类和分类索引、XML和HTML文档、数据库索引、算法和数据结构、路由和网络拓扑、AI决策树和推荐系统等场景中使用。它具有良好的扩展性和灵活性，在查找、插入和删除等操作上也具有较高的效率。 通过Layui tree组件，开发者可以轻松地实现树形菜单权限管理，并且可以选择父节点时不将子节点全部选中。根据你提供的引用内容，你可以尝试覆盖项目中的tree.js文件，达到这个目的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值