layui tree 单选
时间: 2023-09-05 18:13:06 浏览: 183
在 layui 的 tree 组件中,可以通过设置 `clickCheck` 属性来实现单选功能。具体做法如下:
1. 在 tree 的配置项中设置 `clickCheck: true`,表示点击节点时同时选中节点。
2. 在 tree 的事件监听中,监听 `click` 事件,并在回调函数中对选中的节点进行处理。例如,可以遍历所有节点,将除当前节点外的其它节点设置为未选中状态。
下面是一个示例代码:
```javascript
layui.use(['tree', 'form'], function(){
var tree = layui.tree,
form = layui.form;
var data = [{
title: '节点1',
id: 1,
children: [{
title: '子节点1-1',
id: 2,
children: [{
title: '子节点1-1-1',
id: 3
}]
}]
}, {
title: '节点2',
id: 4
}];
tree.render({
elem: '#tree',
data: data,
clickCheck: true,
oncheck: function(obj) {
// 处理选中节点的事件
var currentNode = obj.data; // 当前选中的节点
var allNodes = tree.getChecked('tree'); // 获取所有选中节点
// 遍历所有节点,将除当前节点外的其它节点设置为未选中状态
layui.each(allNodes, function(index, item){
if(item.id !== currentNode.id) {
tree.setChecked('tree', item.id, false);
}
});
}
});
});
```
在上面的代码中,我们利用 `tree.getChecked` 方法获取了所有选中的节点,然后遍历所有节点,将除当前节点外的其它节点设置为未选中状态。这样就实现了 layui tree 的单选功能。
阅读全文