angular-ui-tree中禁止拖拽和下拉按钮浮动的问题

闻人梓
2023-12-01

在网上找了各种博客地址,怎么使用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>

 

 类似资料: