数据绑定到 jsTree

Data binding to jsTree

本文关键字：jsTree 数据绑定      更新时间：2023-09-26

我想做的是使用JS框架将一些动态数据绑定到jsTree（即该库中的树组件）树。我顺便使用 vue.js但这个问题完全独立于框架。目前看起来jsTree只支持在初始化时设置树数据，即当你调用$().jstree()时，这不是我想要的，因为我的数据会随着时间的推移而变化，我希望这反映在树本身。

最明显的方法是，绑定到 HTML 然后在这些元素上创建 jsTree 不起作用，因为 jsTree 在初始化时从 DOM 中删除原始 HTML： 

<div id="jsTree">
    <!--This is all destroyed :( -->
    <ul>
        <li v-repeat="nodes"> {{$value}} </li>
    </ul>
</div>

但是，如果您只是使用 DOM 并在初始化后手动将节点添加到树中，它看起来不错。但是在框架编译页面后，您无法将数据绑定到 DOM（没有困难）。

那么 jsTree 如何与数据绑定一起使用呢？

由于我没有找到现有的解决方案，所以我自己做了两个。

首先是jsTreeBind。当我发表这篇文章时，它完全符合我的需求。你用 DOM 模板（例如<div>s）创建一个标准 HTML 元素的隐藏树，然后插件将此树转换为 jsTree，动态更新以跟上 DOM 更新。

然而，我最终意识到这实际上不是一个很好的解决方案，因为范围数据被复制了 4 次。如果你考虑一下用于生成 jsTree 的原始范围数据，这些数据在框架的作用域 （1） 中存储一次，在 DOM 视图中绑定到 （2） 中存储一次，在 jsTree json 数据中存储一次，在 jsTree DOM （4） 中存储一次。

因此，有鉴于此，我制作了 Botany，一个制作树视图的库（如 jsTree），但声明式的，这意味着您只需将数据绑定到 DOM，并应用 .botany 类，它突然看起来像一棵树。数据不会经过一系列复杂的转换，并且会自动更新，因为这就是 CSS 的工作方式。该项目尚未完全完成，但我建议您看一看，如果可以的话，请提供建议或贡献！

我在angularjs中嵌入了内容 使用$templateRequest，您可以通过模板的URL加载模板，而无需将其嵌入到HTML页面中。如果模板已经加载，例如，在 Angularjs 控制器中单击按钮

app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
   $scope.MakeTemplateToJsTree = function () {
         var templateUrl = $sce.getTrustedResourceUrl('Security/UlListTemp');
         $templateRequest(templateUrl).then(function (template) {
             $compile($("#boxTree").html(template).contents())($scope);
         }, function () {
       
        });
      // this NodeList array will bind to ng-repeat
       $scope.NodeList = [];
   

       setTimeout(function () {
            $('#jstree_demo_div').jstree();
        }, 300)
    }
 });
/

/#jstree_demo_div 在 UlListTemp 中是 asp.net MVC 中的部分视图，它具有完整的功能，如 ng-repeat。我将我的部分视图共享为模板"_UlListTemp.chtml"

<div id="jstree_demo_div">
   <ul class="sidebar-menu">
      <li class="treeview" ng-repeat="n in NodeList" id="li{{n.Id}}">
        <a href="#">
            <span>{{n.ModuleName}}</span>
        </a>
        <ul class="treeview-menu">
            <li ng-repeat="p in n.ProgramList">
                <a>
                            <span>{{p.ApplicationName}}</span>
                </a>
            </li>
        </ul>
    </li>
</ul>
相关文章：