[layui]拓展组件Eletree的使用

最新推荐文章于 2021-12-24 16:08:59 发布

iChangebaobao

最新推荐文章于 2021-12-24 16:08:59 发布

阅读量6.3k

点赞数

分类专栏： LayUI

本文链接：https://blog.csdn.net/iChangebaobao/article/details/90898002

版权

LayUI 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍layui扩展组件Eletree的使用方法，包括引入css和js文件，配置layui及使用eleTree.render方法渲染树形结构，实现异步加载数据、高亮当前选中节点、手风琴效果等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui拓展组件Eletree的使用

第一步：
引入css、js

<link rel="stylesheet" href="../../layui/css/eleTree.css">
<script src="../../layui/layui.js" charset="utf-8"></script>

第二步：

html：
<div class="eleTree ele1" lay-filter="data1"></div>

js:
<script>
			layui.config({
				base: "lay/mymodules/" //模块的所在路径
			}).use([ 'eleTree', 'code', 'form'], function() {
				var $ = eleTree = layui.eleTree,
					code = layui.code,
					form = layui.form;
		  //var Treedata= [
                    //    {
                    //        id: 1,
                    //        label: "安徽省",
                    //        children: [
                    //            {
                    //                id: 2,
                    //                label: "马鞍山市",
                    //                children: [
                    //                    {
                    //                        id: 3,
                    //                        label: "和县",
                    //                    },
                    //                    {
                    //                        id: 4,
                    //                        label: "花山区",
                    //                    }
                    //                ]
                    //            }
                    //        ]
                    //    },
                    //    {
                    //        id: 5,
                    //        label: "河南省",
                    //        children: [
                    //            {
                    //                id: 6,
                    //                label: "郑州市"

                    //            }
                    //        ]
                    //    }
                    //];


				var el = eleTree.render({
					elem: '.ele1', //指定原始 table 容器的选择器或 DOM
					url: 'http://192.168.1.146/hsdhasj', // 异步数据接口
					//url:‘tree.json’     //或者模拟数据
					// data: Treedata,//本地的数据,写在layui.config
					//contextmenuList: ["copy", "add", "edit", "remove"], // 启用右键菜单，支持的操作有："copy","add","edit","remove"
					highlightCurrent: true, // 是否高亮当前选中节点，默认值是 false。
					accordion: false, //是否每次只打开一个同级树节点展开（手风琴效果）
					renderAfterExpand: true, //是否在第一次展开某个树节点后才渲染其子节点
					emptText: "暂无数据", // 内容为空的时候展示的文本
					expandOnClickNode: false,
					// showCheckbox: true,
					method: "POST",
					where: {
						token: token
					},
					defaultExpandedKeys: [
						2 //id
					], // 默认展开的节点的 key 的数组
					request: { //对于后台数据重新定义名字
						name: "label",
						key: "id",
						children: "children",
						checked: "checked",
						disabled: "disabled"
						// isLeaf: "isLeaf"
					},
					response: { //对后台返回的数据格式重新定义
						statusName: "status",
						statusCode: 1,
						dataName: "data"
					},
					done: function(res) { //数据请求完成的回调函数，只有异步请求才会有
						// res即为你接口返回的信息。
						console.log(res);
					},
				});

				// 节点点击事件
				eleTree.on("nodeClick(data1)", function(d) {
					console.log(d.data.currentData.id); // 点击节点对应的数据
					console.log(d.event); // event对象
					console.log(d.node); // 点击的dom节点
					console.log(this); // 与d.node相同
					table.reload('test', {
						page: {
							curr: 1 //重新从第 1 页开始
						},
						where: {
							token: token,
							groupId: d.data.currentData.id //设定异步数据接口的额外参数
						}
					});
				});```