一步步編寫avalon組件05：樹組件

Ocean 發(fā)布于2019-08-22 10:35 / 1402人閱讀

摘要：給人印象中，樹組件是非常令人畏懼的一個(gè)組件，超級(jí)復(fù)雜，超級(jí)難寫。但使用來做，這卻是級(jí)其簡(jiǎn)單的一件事。換言之，我們用元素作為樹的節(jié)點(diǎn)，那么樹組件內(nèi)部也需要存在樹組件，需要形成遞歸結(jié)構(gòu)。的機(jī)制又是出場(chǎng)的時(shí)候了。

給人印象中，樹組件是非常令人畏懼的一個(gè)組件，超級(jí)復(fù)雜，超級(jí)難寫。但使用avalon2來做，這卻是級(jí)其簡(jiǎn)單的一件事。首先從樣式入做，無序列表是天然可用的樹結(jié)構(gòu)，幾個(gè)UL元素套在一起，它們就自然處理好縮進(jìn)問題。換言之，我們用UL元素作為樹的節(jié)點(diǎn)，那么樹組件內(nèi)部也需要存在樹組件，需要形成遞歸結(jié)構(gòu)。avalon2的slot機(jī)制又是出場(chǎng)的時(shí)候了。

因此我們的樹的結(jié)構(gòu)大概是

樹
   子樹
   子樹
       子樹

此外，樹擁有還有折疊子樹的功能，這好辦，我們使用ms-visible實(shí)現(xiàn)隱藏顯示子樹。通過ms-click來為ms-visible傳參。



    
        
        Title

看，我們的樹組件一下子就出來，雖然看起來非常樸素，但的確是樹，如果找設(shè)計(jì)師美化一下，添加些好看的ICON，完全是ztree沒有什么兩樣。當(dāng)然我們也可以照搬ztree的圖標(biāo)。最重要的，代碼太少了，維護(hù)起來超方便。

云服務(wù)器 GPU云服務(wù)器樹組件一步步搭建框架一步步搭建物聯(lián)網(wǎng)系統(tǒng) 組件和組件通信

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/90899.html

相關(guān)文章

一步步編寫avalon組件03：切換卡組件

摘要：那么組件容器是被誰替換呢當(dāng)然是組件。我們使用來定義組件時(shí)，必須有一個(gè)屬性，它是一個(gè)模塊，它會(huì)轉(zhuǎn)換為組件。一個(gè)組件可以擁有個(gè)元素，它們的值不能重復(fù)。好了，我們看一下切換卡是如何做的。本章開始介紹slot機(jī)制。 slot是WEBComponent引進(jìn)的東西，叫做插槽。在瀏覽器中，它為一個(gè)content元素。不過有資料表明，它會(huì)更名為slot。并且在其他語言的模板引擎中，slot標(biāo)簽更為...

kbyyd24 2019-08-22 10:35 評(píng)論0 收藏0
一步步編寫avalon組件04：GRID組件

摘要：組件表格是非常常用的組件，尤其是后臺(tái)系統(tǒng)。它的制定也是五花八門的。因此有大量的組件，每個(gè)都龐大無比，集成各種功能，復(fù)雜得像。強(qiáng)大的組件機(jī)制就此而生。通常就是一個(gè)表頭，表頭固定。要與分析欄進(jìn)行聯(lián)動(dòng)。 grid組件（表格）是非常常用的組件，尤其是后臺(tái)系統(tǒng)。它的制定也是五花八門的。因此jQuery有大量的grid組件，每個(gè)都龐大無比，集成各種功能，復(fù)雜得像Excel。但即便是這樣，我們的產(chǎn)品...

reclay 2019-08-22 10:35 評(píng)論0 收藏0
吐槽專用

摘要：最終選擇了兼容到的，終于使用上框架，雖然它只是個(gè)。沒有對(duì)比就沒有傷害本來想著技術(shù)棧統(tǒng)一，移動(dòng)端也準(zhǔn)備使用。于是，之后對(duì)移動(dòng)端的技術(shù)選型上更加慎重了，最終采用了文檔更漂亮的。易用還真不易用，坑還真多。吐槽 avalon.js 歷史背景需求重大調(diào)整，所有業(yè)務(wù)推倒重來（pc端主要任務(wù)涉及管理后臺(tái)類型的網(wǎng)站）；開發(fā)周期很緊，過年前要上線；公司pc端業(yè)務(wù)要求兼容到ie8； 2015年前...

zxhaaa 2019-08-22 10:36 評(píng)論0 收藏0
avalon與masonry的結(jié)合

摘要：相關(guān)組件版本最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測(cè)試的結(jié)果很令人沮喪，依然沒有控制節(jié)點(diǎn)的位置，所以應(yīng)該不是這個(gè)問題。相關(guān)組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發(fā)后臺(tái)...

Kosmos 2019-08-22 10:59 評(píng)論0 收藏0
avalon 項(xiàng)目實(shí)踐記錄

摘要：業(yè)務(wù)組件模塊化拆分復(fù)用后整體可維護(hù)性也得到了很大提升。先贊一個(gè)當(dāng)然凡事都有相對(duì)的一面，此篇文字就主要記錄自己在項(xiàng)目過程中的一些問題。原文地址：http://mtmzorro.github.io/201... 項(xiàng)目背景需要兼容到IE7（根據(jù)數(shù)據(jù)支撐重要說服拋棄IE6）上個(gè)版本傳統(tǒng) jQuery DOM 開發(fā)模式，經(jīng)過無數(shù)手維護(hù)已經(jīng)慘不忍睹核心業(yè)務(wù)流程，可維護(hù)性、健壯性要求高主...

yvonne 2019-08-20 17:35 評(píng)論0 收藏0