jstree的简单用法

来源：互联网发布：windows rt中文语言包编辑：程序博客网时间：2024/06/01 09:09

jstree是一个基于JavaScript的，跨浏览器的树组件。它被打包成一个jQuery插件，个人感觉功能很强大，用处也很广泛！！！

下面是简单的页面显示

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jstree的用法</title><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/jquery.jstree.js"></script><script language="javascript">$(function() {$("#demo").jstree({"json_data" : {"data" : [ {"data" : {"title" : "百度一下","attr" : {"href" : "http://www.baidu.com","target" : "_top"}},"attr" : {"id" : "111","name" : "zhangsan"},"children" : [ {"data" : "一组"}, {"data" : {"title" : "二组","attr" : {"href" : "http://www.sina.com"}},"children" : [ "aaaa", "asdfsad" ]} ]} ]},"plugins" : [ "themes", "json_data" ]});});</script><style type="text/css"><!--body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;font-size: 12px;}--></style></head><body><div id="demo"></div></body></html>

而实际中我们需要动态的获取服务端的发来的数据，下面另外一种方式:

jsp页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jstree的用法</title><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/jquery.jstree.js"></script><script language="javascript">$(function(){$("#demo").jstree({"json_data":{"ajax":{"url":"system/company!tree.action"}},"plugins" : [ "themes", "json_data" ,"ui" ]}); $("#demo").bind("loaded.jstree",function(event){$("#demo").jstree("open_all",-1);});$("#demo").bind("select_node.jstree",function(event,data){//取li标记上的属性alert(data.rslt.obj.attr("id"));//取a标记上的属性alert(data.rslt.obj.context.href);});});</script><style type="text/css"><!--body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;font-size:12px;}--></style></head><body><div id="demo"></div></body></html>

下面是action的部分代码

public void tree(){try {Node root=new Node("捷大信息科技有限公司",1);Node n1=new Node("培训1部",2);root.addChildNode(n1).addChildNode(new Node("一一组",1));Node n2=new Node("培训2部",3);Node n21=new Node("二一组",1);Node n211=new Node("二一一组",1);Node n22=new Node("二二组",2);root.addChildNode(n2).addChildNode(n21).addChildNode(n211);root.addChildNode(n2).addChildNode(n22);String str=JSONMapper.toJSON(root).render(false);ServletActionContext.getResponse().setCharacterEncoding("utf-8");ServletActionContext.getResponse().getWriter().print(str);} catch (Exception e) {e.printStackTrace();} }

注意此写法用到了jsontools-core-1.7.jar包，作用你懂得的

下面是使用的Node辅助类

import java.util.HashMap;import java.util.HashSet;import java.util.Map;import java.util.Set;public class Node {private Map data = new HashMap();private Map attr = new HashMap();private Set<Node> children;public Map getData() {return data;}public void setData(Map data) {this.data = data;}public Node(String title) {this.data.put("title", title);}public Node(String title, int id) {this.data.put("title", title);Map atr = new HashMap();atr.put("id", id);this.data.put("attr", attr);attr.put("id", id);}public Node(String title, int id, String href) {this.data.put("title", title);Map atr = new HashMap();atr.put("id", id);atr.put("href", href);this.data.put("attr", attr);attr.put("id", id);}public Node addChildNode(Node child) {if (children == null) {children = new HashSet<Node>();}children.add(child);return child;}public Map getAttr() {return attr;}public void setAttr(Map attr) {this.attr = attr;}public Set<Node> getChildren() {return children;}public void setChildren(Set<Node> children) {this.children = children;}}

两种的用法的效果图

如果您有什么不懂的，请参见：http://www.jstree.com/demo