使用過ztree得都應(yīng)該知道當(dāng)你點擊某個節(jié)點的時候 , 會增加 currentSelectedNote類,即 當(dāng)前選中節(jié)點:
貼上我實現(xiàn)的效果. ?反正是經(jīng)歷了好多波折......
因為需要用到對節(jié)點的 增 刪 ?改 ?排序 ?這4個功能. ? 然后問比較有經(jīng)驗的同事說 用什么插件比較好. ?自己也對比了幾個. ?最后選擇了ztree. ? ? ? ? ?從看ztree文檔,加上手使用 實現(xiàn)相應(yīng)的功能,基本用了一周.. 調(diào)試接口又花了將近一周.... 自認(rèn)為上手的有點慢,因為期間都是自己在那摸索,也踩了不少的坑
? ? 今天我們就不說什么增刪改排序啥的了, ?我們班來說下這個選中效果. 這是在我所有功能做完后, 看到需求還有這樣的要求,,,我硬是改了一天....試了好多種方法..因為我前端基礎(chǔ)相對薄弱,但是還是給搞出來了
實現(xiàn)思路就是,? 一開始加載 默認(rèn)選中 默認(rèn)區(qū)域.. 此時,? 在拿到數(shù)據(jù) 初始化ztree的時候, 通過設(shè)置ztree setting對象, 會過addDiyDom ? . ?即 ?文檔上寫的 ?自定義 元素 . 這個方法里 主要是在原始ztree 的li 容器中 可以添加 你還需要的元素.... ? ? ?
我在這個方法里 給每一個treeNode節(jié)點 報過了一層div. ?然后 判斷treeNode.id ? 如果是默認(rèn)區(qū)域. ?我就讓包裹的這層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 節(jié)點中 span元素的前面
4. ?var selectedObj = $('#'+ page.treeId+' >div#heightLight'); ?//記錄當(dāng)前選中的對象節(jié)點(page.treeId 初始值是默認(rèn)區(qū)域 id)
lastSelectedNode = selectedObj; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
5. ?selectedObj.addClass("on"); ? ? ? ? ? //on (默認(rèn)是隱藏的, dispaly:block)? 此時讓包裹的div顯示.(.)?
此時, 包裹設(shè)置完畢. ? ??
當(dāng)點擊的時候,我么先移除 lastSelectedNode 的on ?.
lastSelectedNode.removeClass("on");
然后 從新 重復(fù) 上面的 4 5步驟即可.. 其中page.treeId 點擊的時候應(yīng)為 你點擊的treeNode.treeId.
思路就是這樣的. 希望對你有幫助. ?
