layui 勾选不联动父项 树形控件_layui树形组件点击树节点后高亮的解决方案

一、最终实现

tree.render({

id:'levelOrgTree',

elem: '#level_org_tree' //绑定元素

,data: data

,onlyIconControl: true //点击后不收缩

,click: function(obj){

_evaluation.search(currTreeId);

//当前点击的树节点

var currTreeId = obj.data.id;

//上一次点击的树节点id

var beforeTreeId = $('#tree_id').val();

//对比前后id，不相同时移除上一个节点的样式，并设置当前点击的节点样式

if (currTreeId !== beforeTreeId){

$('div [data-id="'+currTreeId+'"] div').eq(1).last().css('background-color','#87eaa3');

$('div [data-id="'+beforeTreeId+'"] div').eq(1).last().css('background-color','');

$('#tree_id').val(obj.data.id);

}

}

});

二、思路解析

1、通过浏览器控制台查看树形组件的元素组成，发现其每个节点都有包含一个唯一id(data-id="xxxx")的div，div下有两个子div，选取最后一个div作为我们设置背景色的元素，这时还需要将点击的节点id存到hidden input中作为上一次的点击记录，以便再次点击时取消高亮。其html元素如下：

某某节点

2、需要注意，当点击的节点下还有子节点时，如果直接通过last()方法选择最后一个div，这时选中的是最后一个子节点，所有必须在last()之前先选中当前点击节点中的第一个div，再通过此div选择最后一个div才是正确的。