【问题标题】:angular-ui-tree avoid full renderingangular-ui-tree 避免完全渲染
【发布时间】:2015-10-26 13:54:52
【问题描述】:

我使用 angular-ui-tree 来渲染带有数据的树,但每次加载页面时都会渲染所有节点,我想避免渲染,因为大量数据会锁定浏览器。

我尝试添加 data-nodrop-enabled 和 data-collapsed="true",但是渲染的树只有一个区别,所有节点都关闭了。

有没有一种方法可以使用这个组件在客户端上按需渲染数据? https://github.com/angular-ui-tree/angular-ui-tree

主视图:

 <div ui-tree id="tree-root">
     <ol ui-tree-nodes ng-model="Nodes">
         <li ng-repeat="node in Nodes" data-nodrop-enabled ui-tree-node data-collapsed="true" ng-include="'app/shared/renderNode.html'"></li>
     </ol>
 </div>

局部视图

<div ui-tree-handle class="tree-node tree-node-content tree-node-rules">
    <a class="btn btn-default btn-sm" ng-if="node.Nodes && node.Nodes.length > 0" data-drag-enabled="false" data-nodrag ng-click="toggle(this)">
        <span class="glyphicon" ng-class="{'glyphicon-folder-close': collapsed,'glyphicon-folder-open': !collapsed}"></span>
    </a>        
     <span class="btn-title btn-title-parent">{{node.Path}}</span>       
</div>
<ol ui-tree-nodes="" ng-model="node.Nodes" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.Nodes" class="tree-item-title" data-collapsed="true" data-nodrag ui-tree-node ng-include="'app/shared/renderNode.html'"></li>
</ol>

【问题讨论】:

    标签: javascript angularjs tree angular-ui-tree


    【解决方案1】:

    我的建议是尽可能多地嵌套数据并为树维护一个控制器。主视图由局部视图引用,它递归地引用自身。不要认为有局部渲染的选项。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-08-04
      • 2018-12-16
      • 1970-01-01
      • 2022-10-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多