angular-ui-tree中禁止拖拽和下拉按鈕浮動的問題

在網上找了各種博客地址,怎麼使用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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章