jstree 实例二

最新推荐文章于 2023-08-19 11:40:05 发布

摩羯座-小齐

最新推荐文章于 2023-08-19 11:40:05 发布

阅读量4.7k

点赞数

分类专栏： javascript 文章标签： json themes plugins function xhtml ajax

本文链接：https://blog.csdn.net/qlp3643_1/article/details/6101666

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jstree 使用json data 实例二：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<body>

<div id="demo1" class="demo"></div>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
  "json_data" : {
   "ajax" : {
    "url" : "_json_data.json",
    "data" : function (n) {
     return { id : n.attr ? n.attr("id") : 0 };
    }
   }
  },
   "languages" : [ "zh" ],
  "plugins" : [ "themes", "json_data" ]
});
});
</script>

</body>
</html>

说明：

1.div id="demo1" 与 $("#demo1").jstree demo1的名称必须相同。

2."json_data" 内，url 可以是.json的文件，也可以提交ajax请求。通过请求返回json格式的字符串。

3."languages" : [ "zh" ], 说明语言是中文。

4."plugins" : [ "themes", "json_data" ] 如果始用json返回数据，需要plugins 中声明数据源的类型为json_data

5._json_data.json文件的内容如下：

[
{ "data" : "A node", "children" : [ { "data" : "Only child", "state" : "closed" } ], "state" : "open" },
{ "data" : "testnode","attr":{"id":"1"},"children":[{"data":"1"}]}
]