zTree的使用踩坑記錄(編輯 新增)

2021-10-06 03:47:16 字數 3071 閱讀 1676

最近做了乙個功能,在vue中使用到了ztree,要求實現樹節點的新增和編輯,即滑鼠移到節點上的時候顯示出這兩個按鈕,點編輯的時候節點會變成輸入框可直接輸入,點新增的時候會在該節點的子節點中新增乙個節點,並顯示為可編輯狀態。

做的過程中踩了不少坑,記錄下。

首先是先在main.js引入ztree外掛程式

記住,如果有用到ztree自帶的編輯或刪除,一定要記得引入 jquery.ztree.exedit.min;同時,ztree沒有新增節點的按鈕,需要我們自己建立

html部分只需要:

"resourcetree"

class

="ztree"

>

ul>

接下來,在data裡面設一下樹的配置

setting:

,//在這裡配置編輯或刪除按鈕,刪除按鈕沒有寫,有需要的話移步官網api~

edit:,

data:

, key:},

callback:

}

開始貼**

getresourcetree

(treenode)

,//直接傳入data

success :

function

(res)},

fail :

function

(err)})

},inittree()

}

//判斷節點名稱不能為空

beforerename

(treeid, treenode, newname)

return

true;}

,//ztree編輯事件

onrename

(treeid, treenode, newname)

,//直接傳入data

success :

function

(res)

, fail :

function

(err)})

},

//ztree新增節點

addhoverdom

(treeid, treenode)

else

thiz.$store.

dispatch

('axios_req',,

//直接傳入data

success :

function

(res)},

fail :

function

(err)})

});}

,//ztree移除新增節點

removehoverdom

(treeid, treenode)

,

//ztree選中事件

selectchange

(event, treeid, treenode)

,

功能到這個差不多就結束了,另外樹的樣式修改我選擇了自己寫css直接覆蓋,可參考:

//less

@treecloseicon

:url('../../assets/dispatch/tree_close_blue.png')

;@treeopenicon

:url('../../assets/dispatch/tree_open_blue.png')

;@treefileicon

:url('../../assets/dispatch/tree_file_blue.png')

;@treefileiconhov

:url('../../assets/dispatch/tree_file_hov.png')

;@startp

: #677294;

/* 隱藏原始的資料夾圖示 */

.ztree li span.button.ico_close

.ztree li span.button.ico_open

/* 節點名稱樣式 */

.ztree .node_name

/* 編輯時候的輸入框 */

.ztree .node_name input

/* 節點展開 前面的加號圖示修改 */

.ztree li span.button.center_close,

.ztree li span.button.root_close,

.ztree li span.button.bottom_close

/* 節點關閉 前面的減號圖示修改 */

.ztree li span.button.center_open,

.ztree li span.button.root_open,

.ztree li span.button.bottom_open

/* 節點行高拉大 */

.ztree li a

/* 最後一級的節點圖示修改 */

.ztree li span.button.ico_docu

/* 最後一級的節點圖示 前面的虛線位置修改(因為行高被我改大了...) */

.ztree li span.button.switch

/* 節點擊中樣式 */

.ztree li a.curselectednode

.ztree li a.curselectednode .node_name

.ztree li a.curselectednode .ico_docu

展示效果如下:

點編輯按鈕進入編輯狀態:

Python Sphinx使用踩坑記錄

描述 使用 pip 安裝sphinx後,按照教程建立了乙個新的py檔案,如下 run.py defrun name this is how we run param name name of people who runs print name,is running 隨後新建乙個目錄,使用 sphi...

Python Sphinx使用踩坑記錄

使用 pip 安裝sphinx後,按照教程建立了乙個新的py檔案,如下 run.py def run name this is how we run param name name of people who runs print name,is running 隨後新建乙個目錄,使用 sphinx...

C 容器 map的使用踩坑記錄

開發過程中,為了便於查詢,有時會用map容器進行鍵值對 key value 的儲存。在c 中,map的常用功能及注意點記錄如下。常用的map構造方式如下 include mapint mapscore 通過insert可以對map插入元素,主要有以下幾種方式 mapscore.insert pair...