jstree html 和 json

Question

我正在使用 JSTree 来创建我拥有的数据的树形结构。

我正在使用 Scala 模板。模板文件创建 html。 html 有一个 SJTree div 标记，并且还正确显示了第一级子树，但我想进行 ajax 调用以进一步扩展树。

下面是我的代码

@(course:models.CourseDetails,realtedCourses:List[models.CourseDetails])
        @import helper._ 
        @importhelper.twitterBootstrap._ 

       @main() {
       @wflash()

<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
  <li id="@{course.wnCourseName}"><font color="black">@course.wnCourseName</font>
  <ul>
    @for(children1 <- realtedCourses) {
        <li id="@{children1.wnCourseName}"> <b><font color="blue">@children1.wnCourseName</font></b></li>
        }
  </ul>
  </li>
</ul>
</div>

<div id="CourseData" class="tree well">
    @views.html.display.displayCourseInfo(course)</div>
</div>

JavaScript 代码是

$('#jstree').jstree();
$('#jstree').jstree({
    'core' : {
        'data' : {
            'url' : function (node){
                if (node.id === '#')
                {
                    return "http://localhost:9000/getCourses/" ;
                }else
                    return "http://localhost:9000/getCourses/" + node.id;
            },
            'data' : function (node) {
                return { 'id' : node.id };
            }
        }
    }
});

我只想在 click 事件上为子树调用 ajax 函数。我在 JSTree 插件中看到了事件部分，但不确定如何在事件中对服务器进行 ajax 调用并更新树。

服务器端 JSON 响应

[  
  {  
    "data":"Science",
    "attr":{  
      "id":"Science"
    },
    "state":"closed"
  },
  {  
    "data":"Commerce",
    "attr":{  
      "id":"Commerce"
    },
    "state":"closed"
  },
  {  
    "data":"Arts",
    "attr":{  
      "id":"Arts"
    },
    "state":"closed"
  }
]

我也应该包含parent 属性吗？

理想情况下，我想对事件进行 ajax 调用并更新树。

Answer 1

您不应该两次创建树。请记住，混合 HTML 和 JSON 数据源将很难实现。如果您可以创建一个 JS 变量，该变量将保存初始树，然后移动到 AJAX，那就更好了。在任何情况下，您都需要使用core.data 作为函数。

如果你坚持将 HTML 与 JSON 结合，则必须先存储原始 HTML，然后再进行 AJAX，如下所示：

var tmp = $('#jstree').html();
$('#jstree').jstree({
    "core" : {
        "check_callback" : true,
        "data" : function (node, cb) {
            if(node.id === "#") {
                cb(tmp);
            }
            else {
                // enhance the AJAX call as needed (verb, data)
                $.ajax({ url : "http://localhost:9000/getCourses/" + node.id })
                    .done(function (data) { cb(data) });
            }
        }
    }
});

这是一个工作演示（当然没有 AJAX）：
http://jsfiddle.net/DGAF4/542/