在
Layui中，可以通过使用tree组件来实现
select选择框以树形结构
显示。首先，引入
Layui的tree模块。然后，通过ajax等方式获取要
显示的树形数据，并将数据进行处理
生成树结构数据。接着，使用
Layui的
form模块的
select组件，设置lay-filter属性为对应的值，再使用
Layui的tree组件渲染树形结构到
选择框中。最后，使用
form.render()方法对页面进行渲染。
示例代码如下：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
LayUI Tree
Select Demo</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/
layui/2.5.7/css/
layui.css">
</head>
<body>
<div
class="
layui-
form-item">
<label
class="
layui-
form-label">
选择框：</label>
<div
class="
layui-input-block">
<
select name="tree
Select" lay-filter="tree
Select">
<option value="">请
选择</option>
</
select>
</div>
</div>
<script src="https://cdn.staticfile.org/
jquery/3.6.0/
jquery.js"></script>
<script src="https://cdn.staticfile.org/
layui/2.5.7/
layui.js"></script>
<script>
layui.use(['
form', 'tree'], function () {
var
form =
layui.
form;
var tree =
layui.tree;
// 模拟获取树形数据
var treeData = [
{
title: '节点1',
id: 1,
children: [
{
title: '节点1-1',
id: 11,
children: [
{
title: '节点1-1-1',
id: 111
},
{
title: '节点1-1-2',
id: 112
}
]
},
{
title: '节点1-2',
id: 12
}
]
},
{
title: '节点2',
id: 2,
children: [
{
title: '节点2-1',
id: 21
},
{
title: '节点2-2',
id: 22
}
]
}
];
// 递归处理数据
生成树结构数据
function handleTreeData(data) {
$.each(data, function (index, item) {
item['name'] = item.title; // 将title修改为name，符合 tree 组件的属性要求
if (item.children && item.children.length > 0) {
handleTreeData(item.children);
}
});
}
// 渲染树形结构到
选择框中
function renderTree
Select(data) {
tree.render({
elem: '
select[name="tree
Select"]',
data: data,
showLine: true, //
显示连接线
onlyIconControl: true, // 仅允许节点左侧图标控制展开收起
});
form.render();
}
$(function () {
handleTreeData(treeData);
renderTree
Select(treeData);
});
});
</script>
</body>
</html>
```
以上是一个使用
Layui实现
select选择框以树形结构
显示的示例，通过以上方法可以实现树形结构的
选择框。
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
