淺談ztree節點的增加和獲取

zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。使用zTree會涉及到一些操作的邏輯,例如增加節點、刪除節點等,下面我簡要描述一下實際使用中的一點心得。

zTree的節點json設計(也就是你后臺的數據庫設計)可以采用以下設計格式,每一個節點由id、pId、level、name等字段構成,另外可添加一個relation字段來表示各節點直接的聯系,例如一級節點(id為1)可作0.,二級節點可作0.1.(以‘.’號結尾)。其它的node格式可參考zTree官網demo?www.treejs.cn/v3/main.php#_zTreeInfo

var zNodes =[{id:1, pId:0, level:1, name:"test", open:true}];

有了上述的格式后便可開始實際的操作了,比如異步獲取數據(async,此setting在zTree的官方api上有對應內容),當然我們現在要講的內容是對節點的操作,對其它內容不做拓展,請讀者自行查閱zTree官方文檔。

假設有API(以Restful API設計格式):

1. POST /api/node

2. GET /api/nodes

...

對于新增節點來說,存在著新增根節點新增子節點兩種情況:

對于新增根節點,父節點為0,層級為1,將節點對應的data={pId:0,level:1,name:'xxx}通過ajax或其它手段使用POST api路徑(POST /api/node)向后臺請求即可(id應該不重復,mysql可設置自增,mongodb本身則生成一條id不重復的文檔);

對于新增子節點,父節點為上一級節點id,層級為父節點層級加1,下一步新增操作如上新增根節點一致。

新增節點的邏輯大致如下:


對于獲取樹節點,這里有一個點容易弄混,就是樹的作用。對于樹來說,它應該只作為一個數據的索引,而不是說通過請求后臺api就要將所有的data(你想展示的內容,或者說你的業務邏輯需要用到的數據)都在樹上展示出來(如果需要將data展示出來為什么不能直接用循環來將data放置在多個div塊呢?)。樹展示的節點應該盡量簡潔,例如zTree官網展示的demo只顯示了節點的名稱。

那么此時讀者可能會問:那么對應節點的數據應該怎么展示呢?

這個問題可以用兩種方式來解答,第一,如果在向后臺請求時(GET /api/nodes),返回的json存在data,那么則在點擊zTree上節點時(點擊時提供一個回調函數,函數的參數其中之一即為當前節點的信息),可通過各種形式模態框、iframe內嵌的頁面或你想使用的dom形式來展示對應節點的信息。

第二,可以通過對應節點的id來發起請求例如(/api/node/1),以此來獲得對應節點的信息。

對于以上兩種形式,個人比較推崇后者。生成樹時只需要一些很簡單的字段(id,pid,name等),考慮這種情況,我們想要生產的樹的節點映射的是一個個文檔,那么假設文檔(doc)除了上述簡單字段外還有content、status,doc_html等其它內容。

站在生成樹的角度來說,使用第一種方式,如果在獲取節點時,直接將節點的所有字段全數返回,那么很明顯對于生成樹是很冗余的,并且當doc的content或doc_html內容較長,大小過大時必然會影響樹的生成性能,本來10ms的事弄成需要100ms就得不償失了。

另一方面,使用第二種方式,對于獲取節點信息或操作信息本身和生成樹就是處在不同的業務范圍內,不應該放在同一個維度上來處理;并且在獲取信息時,不同的操作需要用到的信息也會不同,例如當查看doc信息時,只需要看到doc_html、當修改doc信息時,需要使用到content、status等信息;基于原子操作,當使用第一種方式時,如果文檔doc_a是公用的,有兩個人在一段很短的時間內操作該文檔(假設A用戶、B用戶均已打開頁面并在操作期間沒有進行頁面刷新),A用戶在查看doc_a而B用戶在修改doc_a,當B用戶在修改doc_a完成后,A用戶點擊doc_a對應節點,顯然A用戶并沒有獲取到更新后的doc_html,而使用第二種方式則能通過發起請求獲取到修改后的數據信息。

以上就是我向討論一點點內容,才疏學淺,請各位指教,另外如果希望看一下對應的內容可以看我的github的PDoc(前端使用的樹不是用的zTree,用的是element-ui的樹但是大同小異,后臺用的node,歡迎各位star,各位提issue,各位拍磚~),下附地址:

前端地址?github.com/JiaXingBinggan/PDoc-vue.git

后臺地址?github.com/JiaXingBinggan/PDoc-node.git

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,807評論 25 708
  • 你淚眼婆娑 這城市正跟你告別 機場起起落落 這座城市在迎接在告別 你有什么不舍 手里的機票在幫你決絕 離開吧 這里...
    一只喜歡聽故事的桔子閱讀 208評論 0 0
  • 穩定排序能讓下一次排序保證上一次排序的成果 穩定排序的意思是指, 待排序相同元素之間的相對前后關系,在各次排序中不...
    冰吉凌閱讀 202評論 0 1
  • 有沒有問過自己:我是活在當下,還是活在頭腦里? 聽到這個問題,是不是會感覺很詫異,當下是什么?我們不是都活在當下么...
    漫步和蝸牛閱讀 305評論 2 0