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元素如下：

<div data-id="05c5f19fb9964e338706e5827ff4a22c" class="layui-tree-set layui-tree-spread">
  <div class="layui-tree-entry">
    <div class="layui-tree-main" style="background-color: rgb(135, 234, 163);">
    <span class="layui-tree-iconClick"><i class="layui-icon layui-icon-file"></i></span>
    <span class="layui-tree-txt">某某节点</span>
    </div>
  </div>
</div>

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