利用jstree插件轻松构建树应用
最近完成了项目中的一个树状应用，第一次接触了jstree这个插件，总的来说它的官方文档还是比较详细的，但是在使用过程中还是出现了一些问题，下面我就来谈谈这款插件的使用和心得。
首先项目需要构建一棵树，利用jstree插件我们先在页面上静态的把这棵树渲染出来，参照官方文档（http://www.jstree.com/），代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="js/jstree/themes/default/style.min.css"> 7 </head> 8 <body> 9 <div id="jstree"> 10 11 </div> 12 <script src="js/jquery.js"></script> 13 <script src="js/jstree/jstree.min.js"></script> 14 <script src="js/jstree/jstree.checkbox.js"></script> 16 <script> 17 $(function(){ 18 $("#jstree").jstree({ 19 "plugins" : ["checkbox"], 20 'core' : { 21 'data' : [ 22 { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, 23 { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, 24 { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, 25 { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, 26 ] 27 }); 28 }); 29 </script> 30 </body> 31 </html>
现在我们的数据是通过JS完全写死的，真实项目中我们需要向后台发送请求获取渲染数据，所以得利用jstree自己封装的ajax方式，代码如下：
1 <script> 2 $(function(){ 3 $("#jstree").jstree({ 4 "plugins" : ["checkbox"], 5 'core' : { 6 'data' : { 7 'url' : '/usual/psd_demo_push/1/', //请求地址 8 'data' : function (node) { 9 return { 'id' : node.id }; 10 } 11 } 12 }); 13 }); 14 </script>
这样这个插件就会向
'/usual/psd_demo_push/1/'
发送请求，返回的数据和原来我们静态写死在js里的格式是一致的，但需要注意的是，这一数据必须是json对象（object），如果返回的json字符串（string）渲染页面也会失败，这一问题
非常不易发现，因为通过浏览器观察这两种数据是一样的，当我用typeof将其格式打印出来后只有显示object的才能渲染出来，同时我们能使用的属性也必须按照官方文档提供的那样，额外属性则必须写在li_attr或a_attr中，否则是取不到值的：
1 { 2 id : "string" 3 parent : "string" 4 text : "string" 5 icon : "string" 6 state : { 7 opened : boolean 8 disabled : boolean 9 selected : boolean 10 }, 11 li_attr : {} 12 a_attr : {} 13 }
刚才我们通过动态的方式实现了树的显示，但是如果服务器端传输的数据量很大，我们需要异步加载数据的话，jstree也提供了这一的功能，在刚才的js代码中的已经运用到了，即：
1 'data' : function (node) { 2 return { 'id' : node.id }; 3 }
但是如果按照上述方法进行测试确是行不通的，因为通过上述形式的data格式，我们只知道每一个节点的父节点（parent）是哪一个，但是我们不知道该节点下是否存在子节点，所以我们点击父节点的时候没有办法判断该节点下的子节点个数，也就无法从后台获取数据，通过查阅官方文档及所搜其他资料后发现，如果需要异步获取数据，data的格式必须使用官方提供的第二种形式：
1 'data' : [ 2 'Simple root node', 3 { 4 'text' : 'Root node 2', 5 'state' : { 6 'opened' : true, 7 'selected' : true 8 }, 9 'children' : [ 10 { 'text' : 'Child 1' }, 11 'Child 2' 12 ] 13 } 14 ]
在这一种json形式中提供了每一个节点的'children'属性，如果没有则不含子节点，这样当存在子节点时后台提供'children':true就ok了，当点击该节点展开按钮后children中的json内容就会动态渲染到页面中，实现异步获取，大大减轻了页面的数据传输量。
所以最后建议使用第二种格式，如下：
1 { 2 id : "string" 3 text : "string" 4 icon : "string" 5 state : { 6 opened : boolean 7 disabled : boolean 8 selected : boolean 9 }, 10 children : [] 11 li_attr : {} 12 a_attr : {} 13 }
具体的演示操作官方也提供了它的地址：
http://jsfiddle.net/vakata/2kwkh2uL/5/
大家可以对其进行调试，观察其数据请求的形式和内容，对使用该插件会有很大的帮助，同时官方文档也提供了非常丰富的api，github：
https://github.com/vakata/jstree#the-required-json-format