ztree优化当前选中节点的状态效果

使用过ztree得都应该知道当你点击某个节点的时候 , 会增加 currentSelectedNote类,即 当前选中节点:

贴上我实现的效果.  反正是经历了好多波折......

因为需要用到对节点的 增 删  改  排序  这4个功能.   然后问比较有经验的同事说 用什么插件比较好.  自己也对比了几个.  最后选择了ztree.          从看ztree文档,加上手使用 实现相应的功能,基本用了一周.. 调试接口又花了将近一周.... 自认为上手的有点慢,因为期间都是自己在那摸索,也踩了不少的坑

    今天我们就不说什么增删改排序啥的了,  我们班来说下这个选中效果. 这是在我所有功能做完后, 看到需求还有这样的要求,,,我硬是改了一天....试了好多种方法..因为我前端基础相对薄弱,但是还是给搞出来了

实现思路就是,  一开始加载 默认选中 默认区域.. 此时,  在拿到数据 初始化ztree的时候, 通过设置ztree setting对象, 会过addDiyDom   .  即  文档上写的  自定义 元素 . 这个方法里 主要是在原始ztree 的li 容器中 可以添加 你还需要的元素....      

我在这个方法里 给每一个treeNode节点 报过了一层div.  然后 判断treeNode.id   如果是默认区域.  我就让包裹的这层div显示   .  div的背景颜色如图.  并且       z-index:0 ,  防止干扰我们的点击操作.    此时 定义一个全局的lastSelected  记录选中的treeNode.

1.  var  wrapObj = $('#'+ treeNode.tId+' >span');     //这是拿到我们选中的li 中的span元素

2.  var div  =''

";   //定义一个包裹的容器

3.  wrapObj.before(div);                                                //放在 li 节点中 span元素的前面

4.  var selectedObj = $('#'+ page.treeId+' >div#heightLight');  //记录当前选中的对象节点(page.treeId 初始值是默认区域 id)

lastSelectedNode = selectedObj;                              

5.  selectedObj.addClass("on");           //on (默认是隐藏的, dispaly:block)  此时让包裹的div显示.(.) 

此时, 包裹设置完毕.     

当点击的时候,我么先移除 lastSelectedNode 的on  .

lastSelectedNode.removeClass("on");

然后 从新 重复 上面的 4 5步骤即可.. 其中page.treeId 点击的时候应为 你点击的treeNode.treeId.

思路就是这样的. 希望对你有帮助.