Web开发使用jsTree实例

最新推荐文章于 2021-02-17 05:06:47 发布

mixer_a

最新推荐文章于 2021-02-17 05:06:47 发布

阅读量112

点赞数

文章标签： php xhtml ui

<!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>  <div id="demo" class="demo"></div>  <script type="text/javascript"> //window.οnbefοreunlοad=function(){ //离开页面的时候删除 window.οnunlοad=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" οnclick="$.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" οnclick="$('#alog').load('./server.php?analyze');" /> <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' value="refresh" οnclick="$('#demo').jstree('refresh',-1);" /> <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' id="undo" value="undo" οnclick="$.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的设置 })