LayUI tree组件实现展开全部和折叠全部的功能

2024-10-27 前端实例跟版网

html代码部分： div id="menuTree" class="demo-tree-more"/div js组件渲染代码 tree.render({ elem: '#menuTree', data: getData(), //ajax获取data数据 showCheckbox: true, //是否显示复选 id: 'demoId' }); 点击全部展开和全部折叠按钮事件 //menuTree换

html代码部分：

<div id="menuTree" class="demo-tree-more"></div>

js组件渲染代码

   tree.render({
       elem: '#menuTree',
       data: getData(),  //ajax获取data数据
       showCheckbox: true,  //是否显示复选
       id: 'demoId' 
   });

点击全部展开和全部折叠按钮事件

//menuTree换成你自己的id就行
var treeContainer = document.querySelector('#menuTree');
var expandIcons = treeContainer.querySelectorAll('.layui-icon-addition');  //展开代码
var expandIcons = treeContainer.querySelectorAll('.layui-icon-subtraction'); //折叠代码
expandIcons.forEach(function(icon) {
    var clickEvent = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
});
icon.dispatchEvent(clickEvent);
});

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

layui 树形菜单 tree

上一篇：layui实现打印layer.open弹窗内容下一篇：layui tree点击标题选中加色实例代码

相关文档推荐

layui tree点击标题选中加色实例代码

layui tree 点击标题选中加色，具体实例代码如下： layui.use('tree', function () { var tree = layui.tree; //渲染 stree = tree.render({ elem: '#demo2' //绑定元素 , data: treeService , showCheckbox: true , click: function (obj) { //节点选中状态

layui实现打印layer.open弹窗内容

parent.layer.open({ //在父窗口打开 type: 2, //type必须为2，否则打印时候获取不到iframe btn: ['打印','关闭'], title: parent.bigOpenTitle + parent.bigOpenContent + "div class='big-open-title'表单/div", offset: 'auto', skin: 'big-open', area:

layui使用tips鼠标悬停提示语的实例代码

layui使用tips鼠标悬停提示语的实例代码，具体代码如下，有三种方式： !DOCTYPE htmlhtml lang="zh" head meta charset="UTF-8" title测试-liu 劉/title/headscript src="https://cdn.staticfile.org/layui/2.7.6/layui.js"/scriptscript src="https://code.j

layui点击图片实现预览功能

layui点击图片实现预览功能，要怎么实现呢？ HTML内使用代码： img src="..." alt="..." width="200px" height="200px" class="layui-upload-img" onclick="previewImg(this)" JS代码部分： function previewImg(obj) { var img = new Image(); img.src = obj

layui.laydate默认当前时间时分秒

layui.laydate默认当前时间时分秒，详细代码如下： //加载日期控件信息 layui.use('laydate', function() { var laydate = layui.laydate; var now = new Date(); laydate.render({ elem: '#publishTime', theme: 'molv', type: 'datetime', trigger: 'click'

layui表格中判断内容为视频或者图片并实现预览

layui表格中判断内容为视频或者图片并实现预览，具体实例代码如下： !DOCTYPE htmlhtmlhead titleLayui：数据表格table中预览图片、视频/title meta charset="utf-8"/ link rel="stylesheet" href="https://www.layui1.com/static/layui/dist/css/layui.css"

栏目导航

前端实例 Php实例 Java实例 Python实例 C/C++实例 C#/.NET实例其他语言实例