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、是不是感覺也不是很麻煩嫩，這棵樹是真的牛掰，為作者手動點贊。
在option里面可以配置一些參數(shù)：
顯示內(nèi)容--displayfield：'name'（以顯示名稱為例）
id--idField: 'uuid'(如果沒有id，會隨機生成id，保證每個節(jié)點的唯一性)
是否展開節(jié)點：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é)點。那如果需要獲取父節(jié)點怎么處理呢，折騰了老半天之后，最終還是找到了方法。。。。
node.partialSelected 可以獲取到根節(jié)點喲。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)篩子抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
js遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)
下面小編就為大家?guī)硪黄猨s遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
細(xì)說webpack源碼之compile流程-rules參數(shù)處理技巧(1)
webpack作為一種流行的打包工具被廣泛應(yīng)用在web項目的前端工程化構(gòu)建中。下面通過本文給大家介紹webpack源碼之compile流程-rules參數(shù)處理技巧，感興趣的朋友一起看看吧2017-12-12
下面小編就為大家?guī)硪黄猨s獲取隱藏元素寬高的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
最近在網(wǎng)上查閱了不少Javascript閉包(closure)相關(guān)的資料，寫的大多是非常的學(xué)術(shù)和專業(yè)。對于初學(xué)者來說別說理解閉包了，就連文字?jǐn)⑹龆己茈y看懂。撰寫此文的目的就是用最通俗的文字揭開Javascript閉包的真實面目。2009-05-05
js自動閉合html標(biāo)簽(自動補全html標(biāo)記)
假如我有一個DIV，如果沒有閉合后面的樣式都會亂了，這樣的代碼可能會影響后面的樣式，我希望用ＪＳ去自動閉合這種沒有閉合的標(biāo)簽2012-10-10
數(shù)組(Array)是有序的元素序列,若將有限個類型相同的變量的集合命名,那么這個名稱為數(shù)組名,下面這篇文章主要給大家介紹了關(guān)于ES6中數(shù)組新增方法的相關(guān)資料,需要的朋友可以參考下2022-03-03
如何正確使用javascript 來進行我們的程序開發(fā)
Javascript 正確使用方法，下面為大家介紹的是一個關(guān)于如何正確使用javascript 來進行我們的程序開發(fā),需要的朋友可以參考下2014-06-06
現(xiàn)在在手機等移動端設(shè)備訪問的人越來越多，我們前端開發(fā)者一直致力于將設(shè)計稿還原成頁面，供用戶訪問。但除高度還原設(shè)計稿外，交互上的良好體驗也是我們應(yīng)該做到的。2021-05-05
設(shè)置選中的行樣式的js代碼，需要的朋友可以參考下，這里只給出了函數(shù)，具體的自己發(fā)揮。2010-05-05