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才是正确的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 763评论 0 9
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,514评论 0 44
  • jQuery模块 选择器、DOM操作、事件、AJAX与动画 匿名函数自执行 作用:解决命名空间与变量污染的问题 总...
    青青玉立阅读 935评论 0 0
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,072评论 0 2
  • 欢迎关注个人微信公众账号:byodian个人博客:Byodian's Blog JavaScript 基础知识总结...
    工具速递阅读 788评论 0 3