layui中的tree如何默认选择一个值并将该数据样式改变如我要选择一个值为长沙的三级节点我该如何写js
在layui的tree组件中,默认选择一个节点并修改其样式,可以使用以下的方式:
- 在tree初始化的时候,可以通过设置tree的data参数,将长沙这个节点设为默认选中状态。
layui.use(['tree'], function(){
var tree = layui.tree;
var data = [
{
title: '北京',
id: 1,
children: [
{
title: '上海',
id: 11,
children: [
{
title: '长沙',
id: 111
}
]
}
]
}
];
tree.render({
elem: '#tree',
data: data,
click: function(obj){
// 点击节点的回调函数
console.log(obj.data); // 获取点击的节点数据
}
});
// 获取tree的实例
var treeInstance = tree.render({
elem: '#tree',
data: data,
click: function(obj){
// 点击节点的回调函数
console.log(obj.data); // 获取点击的节点数据
}
});
// 默认选中节点
var node = treeInstance.getNodeByParam("id", 111);
treeInstance.setCheckStatus(node, true); // 设置选中状态
});
- 在默认选中节点后,可以通过修改节点的样式来改变其外观。
// 获取tree的实例
var treeInstance = tree.render({
elem: '#tree',
data: data,
click: function(obj){
// 点击节点的回调函数
console.log(obj.data); // 获取点击的节点数据
}
});
// 默认选中节点
var node = treeInstance.getNodeByParam("id", 111);
treeInstance.setCheckStatus(node, true); // 设置选中状态
// 修改节点的样式
var elem = treeInstance.elem.find('.layui-tree-txt[data-id="'+ node.id +'"]');
elem.css('color', 'red'); // 修改文字颜色
elem.parent().css('background-color', 'yellow'); // 修改背景色
以上代码中,首先通过treeInstance.getNodeByParam("id", 111)方法获取到id为111的节点对象,然后通过treeInstance.setCheckStatus(node, true)方法设置该节点的选中状态为true。接下来,通过treeInstance.elem.find('.layui-tree-txt[data-id="'+ node.id +'"]')方法获取到该节点对应的DOM元素,然后可以通过修改DOM元素的样式来改变节点的外观
原文地址: http://www.cveoy.top/t/topic/iXos 著作权归作者所有。请勿转载和采集!