使用过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 =''<div class='selectedStyle'></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.
思路就是这样的. 希望对你有帮助.
