Web开发使用jsTree实例

<!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 v.1.0 - full featured demo</title>
 <script type="text/javascript" src="../_lib/jquery.js"></script>
 <script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
 <script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
 <script type="text/javascript" src="../jquery.jstree.js"></script>

 <style type="text/css">
 html, body { margin:0; padding:0; }
 body, td, th, pre, code, select, option, input, textarea { font-family:verdana,arial,sans-serif; font-size:10px; }
 .demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }
 #container { width:780px; margin:10px auto; overflow:hidden; position:relative; }
 #demo { width:auto; height:400px; overflow:auto; border:1px solid gray; }
 #text { margin-top:1px; }
 .cao a{color:#999!important;}
 </style>
</head>
<body>
<div id="container">

<div id="mmenu" style="height:30px; overflow:auto;">
<input type="button" id="add_folder" value="add folder" style="display:block; float:left;"/>
<input type="button" id="rename" value="rename" style="display:block; float:left;"/>
<input type="button" id="remove" value="remove" style="display:block; float:left;"/>
</div>
<!-- the tree container (notice NOT an UL node) -->
<div id="demo" class="demo"></div>
<!-- JavaScript neccessary for the tree -->
<script type="text/javascript">

//window.onbeforeunload=function(){
//离开页面的时候删除
window.onunload=function(){
$.get('./server.php?operation=check');
}
//添加的函数
function redirect(id)
{
//alert(id);
}

//回调函数，可以在这里任意修改或则添加li上的时间以及属性

function _callBack(d){ 
var re = [], expIds = [], attr = {},clas='';
$.each(d,function(i){
var id =d[i].attr.id;
if(id=='node_16')
{
 clas='cao'
}
//$('.jstree a').css('color','red'); 
    var onclick = "redirect('"+id.replace('node_','')+"')";
 re.push({
    "attr" : { 
       "id": id ,
       "rel":d[i].attr.rel,
       "onClick" : onclick,//添加事件
       "class" :clas//添加属性
      },
    "data" :[
       d[i].data
      ],
    "state" :[
       d[i].state
      ]
   }); 
   }); 
   return re; 
 }
$(function () {
 // Settings up the tree - using $(selector).jstree(options);
 // All those configuration options are documented in the _docs folder
 $("#demo")
  .bind("loaded.jstree", function (e, data) { 
  data.inst.open_all(-1); // -1默认全部展开节点

  }) 
  .jstree({ 
   // the list of plugins to include
   "plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu","core" ],
   
   // Plugin configuration
   // I usually configure the plugin that handles the data first - in this case JSON as it is most common
   "json_data" : { 
    // I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex
    // All the options are the same as jQuery's except for `data` which CAN (not should) be a function
    "ajax" : {
     // the URL to fetch the data
     "url" : "./server.php",
     // this function is executed in the instance's scope (this refers to the tree instance)
     // the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)
     "data" : function (n) { 
      // the result is fed to the AJAX request `data` option
      return { 
       "operation" : "get_children", 
       "id" : n.attr ? n.attr("id").replace("node_","") : 1 
      }; 
     },
     "success":function(d)//回调函数
     {       
      return _callBack(d);
     }
    }
   },
   // Using types - most of the time this is an overkill
   // Still meny people use them - here is how
   "types" : {
    // I set both options to -2, as I do not need depth and children count checking
    // Those two checks may slow jstree a lot, so use only when needed
    "max_depth" : -2,
    "max_children" : -2,
    // I want only `drive` nodes to be root nodes 
    // This will prevent moving or creating any other type as a root node
    "valid_children" : [ "drive" ],
    "types" : {
     // The default type
     "default" : {
      // I want this type to have no children (so only leaf nodes)
      // In my case - those are files
      "valid_children" : "none",
      // If we specify an icon for the default type it WILL OVERRIDE the theme icons
      "icon" : {
       "image" : "./file.png"
      }
     },
     // The `folder` type
     "folder" : {
      // can have files and other folders inside of it, but NOT `drive` nodes
      "valid_children" : [ "default", "folder" ],
      "icon" : {
       "image" : "./folder.png"
      }
     },
     // The `drive` nodes 
     "drive" : {
      // can have files and folders inside, but NOT other `drive` nodes
      "valid_children" : [ "default", "folder" ],
      "icon" : {
       "image" : "./root.png"
      },
      // those options prevent the functions with the same name to be used on the `drive` type nodes
      // internally the `before` event is used
      "start_drag" : false,
      "move_node" : false,
      "delete_node" : false,
      "remove" : false
     }
    }
   },
   "ui" : {
    // this makes the node with ID node_4 selected onload
    "initially_select" : [ "node_4" ]
   },
   // the core plugin - not many options here
   "core" : { 
    // just open those two nodes up
    // as this is an AJAX enabled tree, both will be downloaded from the server
    "initially_open" : [ "node_6" , "node_14" ] 
   }
   
  })
  .bind("create.jstree", function (e, data) {
   $.post(
    "./server.php", //请求的后台的url地址
    { 
     "operation" : "create_node", //操作参数
     "id" : data.rslt.parent.attr("id").replace("node_",""),//id参数 
     "position" : data.rslt.position,//位置参数
     "title" : data.rslt.name,//内容参数
     "type" : data.rslt.obj.attr("rel")//关系参数
    }, 
    function (r) {
     if(r.status) {
      $(data.rslt.obj).attr("id", "node_" + r.id);
     }
     else {
      $.jstree.rollback(data.rlbk);
     }
    }
   );
  })
  .bind("remove.jstree", function (e, data) {
   data.rslt.obj.each(function () {
    $.ajax({
     async : false,
     type: 'POST',
     url: "./server.php",
     data : { 
      "operation" : "remove_node", 
      "id" : this.id.replace("node_","")
     }, 
     success : function (r) {
      if(!r.status) {
       data.inst.refresh();
      }
     }
    });
   });
  })
  .bind("rename.jstree", function (e, data) {
   $.post(
    "./server.php", 
    { 
     "operation" : "rename_node", 
     "id" : data.rslt.obj.attr("id").replace("node_",""),
     "title" : data.rslt.new_name
    }, 
    function (r) {
     if(!r.status) {
      $.jstree.rollback(data.rlbk);
     }
    }
   );
  })
  .bind("move_node.jstree", function (e, data) {
   data.rslt.o.each(function (i) {
    $.ajax({
     async : false,
     type: 'POST',
     url: "./server.php",
     data : { 
      "operation" : "move_node", 
      "id" : $(this).attr("id").replace("node_",""), 
      "ref" : data.rslt.np.attr("id").replace("node_",""), 
      "position" : data.rslt.cp + i,
      "title" : data.rslt.name,
      "copy" : data.rslt.cy ? 1 : 0
     },
     success : function (r) {
      if(!r.status) {
       $.jstree.rollback(data.rlbk);
      }
      else {
       $(data.rslt.oc).attr("id", "node_" + r.id);
       if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
        data.inst.refresh(data.inst._get_parent(data.rslt.oc));
       }
      }
      $("#analyze").click();
     }
    });
   });
  })
});
</script>
<script type="text/javascript">
$(function () { 
 $("#mmenu input").click(function () {
  switch(this.id) {
   case "add_default":
   case "add_folder":
    $("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
    break;
   case "text": break;
   default:
    $("#demo").jstree(this.id);
    break;
  }
 });
});


</script>

<div style="position:absolute; right:30px; top:120px; width:220px; border:1px solid silver; min-height:160px;">
 <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' value="reconstruct" onclick="$.get('./server.php?reconstruct', function () { $('#demo').jstree('refresh',-1); });" />
 <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' id="analyze" value="analyze" onclick="$('#alog').load('./server.php?analyze');" />
 <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' value="refresh" onclick="$('#demo').jstree('refresh',-1);" />
 <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' id="undo" value="undo" onclick="$.get('./server.php?undo', function () { $('#demo').jstree('refresh',-1); });"/>
 <div id='alog'></div>
</div>

<p style="margin:1em 2em 3em 2em; text-align:center; ">If you like the project - consider <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal@vakata.com¤cy_code=USD&amount=&return=http://jstree.com/donation&item_name=Buy+me+a+coffee+for+jsTree">supporting jstree</a>.</p>

</div>

</body>
</html>

jstree 默认展开所有节点方法 .
2011-04-20 17:28 748人阅读 评论(1) 收藏 举报 
在jstree初始化之前绑定方法 

.bind("loaded.jstree", function (e, data) {

 data.inst.open_all(-1); // -1 opens all nodes in the container 

}

 ) 

例如：

 $(function () { 

$("#demo") 

.bind("loaded.jstree", function (e, data) {

                    data.inst.open_all(-1); // -1 opens all nodes in the container 

                    }) 

.jstree({

                //  你的jstree的设置

            })

posted on 2012-04-12 12:38 txf2004 阅读(435) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

网站开发与移动开发

公告