Jquery树形菜单插件之JsTree

环境：0.98版本。

0.98版本可以在官方下载，也可以在这里下载：http://files.cnblogs.com/china-li/jsTree.v.0.9.8.zip。

下载后，打开jsTree.v.0.9.8\reference\index.html，可以看到其详细文档。

一、引入文件

　　需要引入的文件：

• _lib/jquery.js
• _lib/css.js
• source/tree_component.js
• source/tree_component.css

　　必须先引入jquery文件。也可以直接引入_lib/_lib.js文件，这个文件包含了jquery.js  css.js还有cookie插件等。

二、如何创建

　　创建树，有两种方式，通常用的是$('#demo1').tree({});

三、实例

　　我略去了api和配置项的详细讲解，而是在示例中一一指明。

　　首先，JsTree要获取数据，数据的获取形式大致三种：静态，动态，ajax。

　　1、静态很好理解，就是原本就存在的数据。例如，一个原本就存在的html文档：　　

  
Root node 1
Custom icon
Child node 2
Some other child node 111
Root node 2

　　当然，这个html文档遵循了JsTree的规范，不是随意的。我们利用这个原来存在的数据，直接就能生成树：

$(function () {$("#demo1").tree();
});

　　还有我们可以利用json静态数据和xml静态数据来实现树：

$("#demo2").tree({data  : {type  : "json",json  : [ { attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [{ attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },{ attributes: { id : "pjson_3" }, data: "Child node 2" },{ attributes: { id : "pjson_4" }, data: "Some other child node" }]}, { attributes: { id : "pjson_5" }, data: "Root node 2" } ]}
});

$(function () {$("#demo3").tree({data  : {type  : "xml_nested", // or "xml_flat"xml  : ''}});
});

　　只要在页面上留id是demo2和demo3的div即可，里面不用有内容，一切都是JsTree自动加载的。

　　解释属性：

• 　　data      一个大配置项，里面配置数据有关的选项
• 　　type　　类型。可选值： json, xml_flat（平整的xml）, xml_nested（嵌套的xml）, predefined（预定义，如html）
• 　　json，xml      数据源，如上显示

　　2、动态加载。就是从其他文件中加载数据，利用url配置即可。例如从服务端xml文件获取数据：

$(function () {$("#demo4").tree({data  : {type  : "xml_flat", // or "xml_nested" or "json"url   : "1_xml_flat.xml"}});
});

　　同样，也可以从struts2的action中获取xml，或者获取json。

　　3、ajax加载数据。这个是重点，涉及到的东西比较多。ajax动态加载的原理是，先加载顶级节点，当点击顶级节点的时候，根据传到后台的id获取顶级节点的子节点集合。它不是一下子把所有的节点都加载，而是通过这种方式加载数据。这样无疑是节省资源的做法，降低了服务器压力，同时进入页面的等待时间也大大降低。

　　先看一下一个完整的例子，然后解释属性：

$(function(){$.ajaxSetup({cache:false});    //ajax信息不缓存$("#divForTree").tree({data:{type  : "json",url   : "<%=path%>/admin/doList.do",//每次获得数据从这个链接  async : true,//动态加载数据  async_data : function(NODE) {//请求数据时带的参数列表，可通过getParameter获得。return {parentId : getId($(NODE))};}},lang : {loading : "目录加载中..."    //加载的时候显示},rules : {    multiple : 'ctrl'    //允许通过ctrl多选。},ui : {context:{    //右键菜单visible:function(node,tree_obj){return false;    //返回-1表示不可用；false表示不显示    }},theme_name : "classic"    //主题。themes下的四种主题},callback : {    //事件onselect : function(node) {$.tree_reference('divForTree').toggle_branch($(node));},error : function(TEXT, TREE_OBJ) {alert(TEXT);}}});
});

　　先看大配置项：

• data    数据
• lang    标志
• rules   规则
• ui       界面
• callback     回调函数，事件

　　小配置项，都有注释。文档中则有详细讲解。我是在节点被选中的时候（onselect），让节点打开或关闭。后台获取的数据，前台使用getId()方法得到parentId。因为每个节点的id在数据库中都是数字，而纯数字不符合css命名规范，所以我在每个id上都加了一个‘n’。前台解析的时候，getId()方法如下：　　

function getId(node){var id = node.attr('id');if(id){id = $.trim(id.substring(1));}else{id = 0;}return id;
}

　　第一次，获取的是0，显示的是顶级节点。

　　后台需要创建一个工具类，这个工具类依照JsTree规则：

public class JsTreeNode {public static String STATE_OPEN = "open";public static String STATE_CLOSED = "closed";private String id;private String state;private String data;private int hasChild;//...省略getter，setter
}

　　在struts2的返回页面，用标签迭代，输出json：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
[

{"attributes":{"id":"${id}"}
if test="hasChild == 1">,"data":"${data}","state":"${state}","children":[{}]
if>
else>,"data": { "title" : "${data}"/*,"icon":"http://www.cnblogs.com/style/test/img/st_node.gif"*/}
else>},

]

　　如果有子节点，则显示state,如果没有，则输出title就行。后面注释的icon是自定义的图像，可有可无。

　　其中，JsTree中有几个api，比较重要：

$.tree_reference('demo1').selected    //前面是当前tree的引用，selected表示被选择的节点
$.tree_reference('demo1').opened    //被打开的节点集合
$.tree_reference('demo1').selected_arr    //如果在rules下定义了允许多选，这个属性才有用。表示被选择的节点集合
$.tree_reference('demo1').refresh()    //刷新节点
open_branch($(node))    //模拟打开一个节点
close_branch(node)    //模拟关闭
open_all()        //打开所有
close_all()       //关闭所有 
rename()      //重命名
remove()     //删除
next()     //获得下一个节点
prev()     //前一个节点
parent()    //父节点
children()      //子节点集合
get_next()       //
get_prev()    //
get_left()       //
get_right()        //获得选中节点的上下左右
cut()         //剪切
copy()        //复制
paste()       //粘贴

其他的，看文档自己研究！

多一句：1.0使用插件形式来组合的，可以直接使用这个版本！

另外，推荐一个国产Tree插件：ZTree。

转载于:https://www.cnblogs.com/china-li/archive/2012/12/18/2822894.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！