在網上找了各種博客地址,怎麼使用angular-ui-tree構建一顆樹,網上關於這個博客很多,基本上可以滿足要求,但是在使用的過程中,還是遇到了一些問題,參考了其他博客的內容之後,完美解決,得到一個自己滿意的tree。
angular-ui-tree的使用,參考博客地址鏈接
在這個博客中,沒有設置tree的樣式,所以得到的tree不怎麼好看,git上的demo中/example/css/app.css這個樣式文件,可以讓tree變得好看,但是我把這個樣式加進代碼中之後,遇到了下面兩個問題:
1.點擊下拉按鈕上的圖標,摺疊tree時,沒有反應(此時點擊下拉按鈕上的其他位置可以摺疊tree)
解決方法:在app.css樣式文件中,加入下列樣式即可解決。
ol{list-style:none}
2.正常情況下使用angular-ui-tree構建的tree,會提供拖拽的功能,但是,由於業務需求,需要禁止拖拽功能
解決方法:在構件tree的html文件中加入data-drag-enabled = “false”即可,加入代碼的位置參考如下:
<div class="col-sm-6">
<div ui-tree data-drag-enabled="false" id="tree">
<!-- 整個樹div -->
<ol ui-tree-nodes="" ng-model="tree">
<!-- 調用模板 -->
<li ng-repeat="node in tree" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
</div>