jstree施用之一 jstree0.99使用
日期：2014-05-16 浏览次数：20394 次
递归模型的前端展示将不可避免的使用到tree的结构，几番对照之后，发现tree_view似乎已经不再更新。jstree这个俄国人设计的jquery插件却生命力十足，活力四射。所以就选择这个插件进行研究。
1.搭建一个jstree的测试环境
后台使用rails，在public下创建一个目录jstree，然后将下载的jstree包中的相关内容拷贝到这个目录中：
/jstree下包含：jstree.js,jquery.js
/jstree/images:这里包含显示用的图片
/jstree/themes:这里包含各类主题，如checkbox。
这里用的版本是0.99版本（jstree版本与5月25日刚升级到1.0rc版本，变化较大，不过思路可以参考这篇文档，以后，将1.0的使用说明继续在博客中记录）
jquery的版本使用的是1.3.2，使用1.4.1好像有问题，子树不能正常显示。
2.明确目标
使用jstree插件，采用json格式，使用ajax从rails后台获取动态的子树。
前端代码：
<!DOCTYPE html
? PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
? <head>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??? <title>jsTree » Demo » Async HTML</title>
??? <meta name="title" content="jsTree - jQuery tree plugin - Async HTML Demo" />
??????? <!--<link rel="stylesheet" type="text/css" href="style.css" />
??????? -->
??? <script type="text/javascript" src="jquery.js"></script>
??? <script type="text/javascript" src="jquery.tree.js"></script>
??? <link rel="stylesheet" type="text/css" href="/jstest/themes/default/style.css" />
? </head>
? <body? class="nosidebar" >
??? <div id="container">
????? <script type="text/javascript" >
??????? var stat =??? [
????????? { data : "Node 1",attributes : { "id" : "node_1" }? },
????????? { attributes : { "id" : "node_2" }, data : "Node 2", state : "open"},
????????? { attributes : { "id" : "node_3" }, data : "Node 3", state : "closed"}
??????? ];
??????? $(function () {
????????? $.ajaxSetup({cache:false});//ajax 调用不使用缓存
????????? $("#async_json_1").tree({
???????????
??????????? data : {
????????????? type : "json",
????????????? async : true,
????????????? opts : {
??????????????? method : "GET",
??????????????? url : "/ceshi/json_test.json"
????????????? }
??????????? },
??????????? lang:{
????????????? loading:"加载中……"? //在用户等待数据渲染的时候给出的提示内容，默认为loading
??????????? },
??????????? ui:{
????????????? theme_name:'classic'? //设置样式
//???????????? theme_name : "checkbox"
??????????? },
??????????? callback : {
????????????? // Make sure static is not used once the tree has loaded for the first time
????????????? onload : function (t) {
??????????????? t.settings.data.opts.static = false;//让初始化数据只使用第一次
????????????? },
????????????? //n-- 节点，t是tree
????????????? beforedata : function (n, t) {
??????????????? if(n == false)
????????????????? t.settings.data.opts.static = stat;
??????????????? else
????????????????? return {parent_id : $(n).attr("id") || false} // AJAX 调用参数传递
????????????? },
????????????? oncreate :function(n,t){
???????????????
????????????? }
??????????? },
??????????? //插件使用右键菜单支持自定义右键菜单
??????????? plugins:{
????????????? contextmenu:{}
? //??????????? checkbox : {three_state : false }
??????????? },
??????????? rules:{multiple:"false"}
????????? });
??????? });
????? </script>
????? <div class="demo" id="async_json_1"></div>
??? </div>
? </body>
</html>
解释如下：
1.javascript定义部分
??????? var stat =??? [
????????? { data : "Node 1",attributes : { "id" : "node_1" }? },
????????? { attributes : { "id" : "node_2" }, data : "Node 2", state :
"open"},
????????? { attributes : { "id" : "node_3" }, data : "Node 3", state :
"closed"}
??????? ];
定义了初始化的树；
同时在beforedata中进行了定义：
beforedata : function (n, t) {
??????????????? if(n == false)
????????????????? t.settings.data.
