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

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

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

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

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

樹
   子樹
   子樹
       子樹

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



    
        
        Title

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

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

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

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

相關(guān)文章

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

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

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

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

reclay 2019-08-22 10:35 評論0 收藏0
吐槽專用

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

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

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

Kosmos 2019-08-22 10:59 評論0 收藏0
avalon 項目實踐記錄

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

yvonne 2019-08-20 17:35 評論0 收藏0