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/

jstree html 和 json

jstree html and json

javascript

jquery

ajax

scala

jstree