layui tree 选中效果
时间: 2024-06-20 20:02:06 浏览: 14
layui是一个轻量级的前端UI库,其Tree控件提供了一种树状结构的数据展示和交互功能。在layui.Tree中,选中效果可以通过配置项来定制。以下是实现选中效果的一些常用方法:
1. **默认选中**:当你初始化Tree时,可以通过设置`checked`属性或`check()`方法来指定节点自动选中,例如:
```javascript
layui.use('tree', function(){
var tree = layui.tree.init('.demo', {
data: [
{ id: '1', name: '父节点1' },
{ id: '2', name: '子节点1', pid: '1' },
{ id: '3', name: '子节点2', pid: '1' }
],
check: { checked: ['1'] } // 默认选中id为1的节点
});
});
```
2. **单击选中**:用户可以通过点击节点来选中,Tree提供了`selectNode()`方法来手动切换节点状态:
```javascript
tree.on('nodeClick', function(node){
tree.check(node.id, true); // 单击后选中当前节点
});
```
3. **事件触发后的选中效果**:可以监听`check`或`uncheck`事件,根据业务逻辑动态更新选中状态。
要调整样式,你可以自定义样式类名,比如给选中的节点添加一个`layui-tree-checked`类,然后在CSS中定义样式:
```css
.layui-tree-checked {
background-color: #ccc; /* 选中颜色 */
color: #fff;
}
```