angular-tree-component的使用詳解
先上網(wǎng)址吧：https://github.com/500tech/angular-tree-component 這是牛逼哄哄的GitHub頁面， http://500tech.github.io/angular-tree-component/ 這就是官網(wǎng)啦。
大背景--首先我是在Angular4下面使用的。
1、install from npm :
npm install --save angular-tree-component
2、導(dǎo)入css
在styles.scss下面導(dǎo)入樣式：
@import '~angular-tree-component/dist/angular-tree-component.css';
3、import the module
app.module.ts
import { TreeModule } from 'angular-tree-component';
@NgModule({
imports: [..., TreeModule],
...
})
export class AppModule {
...
}
4、app.component.ts里面
nodes = [
{
id: 1,
name: 'root1',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
children: [
{ id: 7, name: 'subsub' }
]
}
]
}
];
options = {};
在 app.component.html里面
<tree-root [nodes]="nodes" [options]="options"></tree-root>
到這里編譯出來就可以看到一棵樹啦
5、是不是感覺也不是很麻煩嫩，這棵樹是真的牛掰，為作者手動點(diǎn)贊。
在option里面可以配置一些參數(shù)：
顯示內(nèi)容--displayfield：'name'（以顯示名稱為例）
id--idField: 'uuid'(如果沒有id，會隨機(jī)生成id，保證每個節(jié)點(diǎn)的唯一性)
是否展開節(jié)點(diǎn)：isExpandedField:'expanded'（默認(rèn)是不展開的喲）
actionMapping:自定義事件，
mouse: {
dblClick: (tree, node, $event) => {
if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
}
}
支持按需加載:
getChildren: this.getChildren.bind(this),
6、events
<tree-root [nodes]="nodes" (toggleExpanded)="onEvent($event)" (activate)="onEvent($event)" (focus)="onEvent($event)" (blur)="onEvent($event)"> </tree-root> onEvent = ($event) => console.log($event);
有activate狀態(tài)就有deactivate狀態(tài)
7、在option里面添加：useCheckBox:true可以顯示checkBox。這時還可以有一個select事件，獲取的是子節(jié)點(diǎn)。那如果需要獲取父節(jié)點(diǎn)怎么處理呢，折騰了老半天之后，最終還是找到了方法。。。。
node.partialSelected 可以獲取到根節(jié)點(diǎn)喲。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項卡切換效果，通過設(shè)置定時器實(shí)現(xiàn)延時0.5s切換選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
大部分小程序都會有這樣的需求，頁面有長列表，需要下拉到底時請求后臺數(shù)據(jù)，一直渲染數(shù)據(jù)，當(dāng)數(shù)據(jù)列表長時，會發(fā)現(xiàn)明顯的卡頓，頁面白屏閃頓現(xiàn)象，那么如何實(shí)現(xiàn)小程序虛擬列表，感興趣的可以了解一下2021-07-07
JavaScript實(shí)現(xiàn)的encode64加密算法實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的encode64加密算法,實(shí)例分析了javascript處理encode64編碼針對字符串加密的技巧,非常簡潔實(shí)用,需要的朋友可以參考下2015-04-04
JS限定手機(jī)版中圖片大小隨分辨率自動調(diào)整的方法
下面小編就為大家?guī)硪黄狫S限定手機(jī)版中圖片大小隨分辨率自動調(diào)整的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
JavaScript動態(tài)添加css樣式和script標(biāo)簽
這篇文章主要介紹了JavaScript動態(tài)添加css樣式和script標(biāo)簽的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到毫秒的倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
bootstrap tooltips在 angularJS中的使用方法
這篇文章主要介紹了bootstrap tooltips在 angularJS中的使用 ,需要的朋友可以參考下2019-04-04
這篇文章主要向大家詳細(xì)介紹了javascript函數(shù)表達(dá)式，幫助大家理解javascript函數(shù)表達(dá)式，感興趣的朋友可以參考一下2016-02-02
對于js中的對象的深拷貝在項目的開發(fā)中比較常用到,本文就來介紹一下JS深拷貝的4種實(shí)現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2023-10-10
微信小程序骨架屏的應(yīng)用與實(shí)現(xiàn)步驟詳細(xì)記錄
所謂骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu),直到請求數(shù)據(jù)返回后再渲染頁面,補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容,這篇文章主要給大家介紹了關(guān)于微信小程序骨架屏的應(yīng)用與實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-05-05