您的位置：首页 > Web前端 > JavaScript

利用jstree插件轻松构建树应用

2015-07-26 23:56 861 查看

最近完成了项目中的一个树状应用，第一次接触了jstree这个插件，总的来说它的官方文档还是比较详细的，但是在使用过程中还是出现了一些问题，下面我就来谈谈这款插件的使用和心得。

首先项目需要构建一棵树，利用jstree插件我们先在页面上静态的把这棵树渲染出来，参照官方文档（http://www.jstree.com/），代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="js/jstree/themes/default/style.min.css">
</head>
<body>
<div id="jstree">

</div>
<script src="js/jquery.js"></script>
<script src="js/jstree/jstree.min.js"></script>
<script src="js/jstree/jstree.checkbox.js"></script>
<script>
$(function(){
$("#jstree").jstree({
"plugins" : ["checkbox"],
'core' : {
'data' :  [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
});
});
</script>
</body>
</html>

现在我们的数据是通过JS完全写死的，真实项目中我们需要向后台发送请求获取渲染数据，所以得利用jstree自己封装的ajax方式，代码如下：

<script>
$(function(){
$("#jstree").jstree({
"plugins" : ["checkbox"],
'core' : {
'data' : {
'url' : '/usual/psd_demo_push/1/', //请求地址
'data' : function (node) {
return { 'id' : node.id };
}
}
});
});
</script>

这样这个插件就会向

'/usual/psd_demo_push/1/'

发送请求，返回的数据和原来我们静态写死在js里的格式是一致的，但需要注意的是，这一数据必须是json对象（object），如果返回的json字符串（string）渲染页面也会失败，这一问题

非常不易发现，因为通过浏览器观察这两种数据是一样的，当我用typeof将其格式打印出来后只有显示object的才能渲染出来，同时我们能使用的属性也必须按照官方文档提供的那样，额外属性则必须写在

li_attr或a_attr中，否则是取不到值的：

{
id          : "string"
parent      : "string"
text        : "string"
icon        : "string"
state       : {
opened    : boolean
disabled  : boolean
selected  : boolean
},
li_attr     : {}
a_attr      : {}
}

刚才我们通过动态的方式实现了树的显示，但是如果服务器端传输的数据量很大，我们需要异步加载数据的话，jstree也提供了这一的功能，在刚才的js代码中的已经运用到了，即：

'data' : function (node) {
return { 'id' : node.id };
}

但是如果按照上述方法进行测试确是行不通的，因为通过上述形式的data格式，我们只知道每一个节点的父节点（parent）是哪一个，但是我们不知道该节点下是否存在子节点，所以我们点击父节点的时候没有办法判断该节点下的子节点个数，也就无法从后台获取数据，通过查阅官方文档及所搜其他资料后发现，如果需要异步获取数据，data的格式必须使用官方提供的第二种形式：

'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]

在这一种json形式中提供了每一个节点的'children'属性，如果没有则不含子节点，这样当存在子节点时后台提供'children':true就ok了，当点击该节点展开按钮后children中的json内容就会动态渲染到页面中，实现异步获取，大大减轻了页面的数据传输量。

所以最后建议使用第二种格式，如下：

{
id          : "string"
text        : "string"
icon        : "string"
state       : {
opened    : boolean
disabled  : boolean
selected  : boolean
},
children    : []
li_attr     : {}
a_attr      : {}
}

具体的演示操作官方也提供了它的地址：

http://jsfiddle.net/vakata/2kwkh2uL/5/

大家可以对其进行调试，观察其数据请求的形式和内容，对使用该插件会有很大的帮助，同时官方文档也提供了非常丰富的api，github：

https://github.com/vakata/jstree#the-required-json-format

原创文章，转载请注明来自一个萝卜一个坑 -博客园[http://www.cnblogs.com/luozhihao]
本文地址：/article/5267116.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航