Hopes

Start Here..

 

xloadtree 的使用

osted on 2006-04-04 09:42 火鸟 阅读(6932) 评论(1)  编辑 收藏 
       XloadTree是http://webfx.eae.net/公司的基于JavaScript的建立树型目录的开源产品,扩展性强,使用简单。

1。XloadTree是基于XmlHttp请求/响应模型,必须使用http协议访问代码才可以正确加载XML文件。
2。使用JSP/Servlet的实例如下:
tree.jsp
<%@ page 
language
="java" 
contentType
="text/xml; charset=UTF-8" 
pageEncoding
="UTF-8" 
%> 
<% 
        response.setContentType(
"text/xml"); 
        out.println(
"<tree>"); 
        out.println(
"<tree text=\"Load tree1.xml\" src=\"tree1.xml\" />"); 
        out.println(
"<tree text=\"Loaded Item 1\" action=\"http://webfx.eae.net\" />"); 
        out.println("<tree text=\"Loaded Item 2\">"); 
        out.println(
"<tree text=\"Loaded Item 2.1\" action=\"javascript:alert(2.1)\" />"); 
        out.println(
"</tree>"); 
        out.println(
"<tree text=\"Loaded Item 3 (with target)\" action=\"http://www.google.com\" target=\"_new\" />"); 
        out.println("<tree text=\"Load tree.xml\" src=\"tree.xml\" />"); 
        out.println(
"</tree>"); 
%>
注意contentType="text/xml; charset=UTF-8" 和response.setContentType("text/xml"),使用的是"text/xml"不是"text/html"。

修改代码:
<script type="text/javascript">

/// XP Look
webFXTreeConfig.rootIcon        = "images/xp/folder.png";
webFXTreeConfig.openRootIcon    
= "images/xp/openfolder.png";
webFXTreeConfig.folderIcon        
= "images/xp/folder.png";
webFXTreeConfig.openFolderIcon    
= "images/xp/openfolder.png";
webFXTreeConfig.fileIcon        
= "images/xp/file.png";
webFXTreeConfig.lMinusIcon        
= "images/xp/Lminus.png";
webFXTreeConfig.lPlusIcon        
= "images/xp/Lplus.png";
webFXTreeConfig.tMinusIcon        
= "images/xp/Tminus.png";
webFXTreeConfig.tPlusIcon        
= "images/xp/Tplus.png";
webFXTreeConfig.iIcon            
= "images/xp/I.png";
webFXTreeConfig.lIcon            
= "images/xp/L.png";
webFXTreeConfig.tIcon            
= "images/xp/T.png";

//var tree = new WebFXLoadTree("WebFXLoadTree", "tree1.xml");
//
tree.setBehavior("classic");

var rti;
var tree = new WebFXTree("Root");
tree.add(
new WebFXTreeItem("Tree Item 1"));
tree.add(
new WebFXLoadTreeItem("Tree Item 2""tree.jsp"));//Loading JSP File
tree.add(rti = new WebFXLoadTreeItem("Tree Item 3 (Reload)""date.xml.pl"));
tree.add(
new WebFXTreeItem("Tree Item 4"));

document.write(tree);

</script>
 

xloadtree 的使用

分类: struts2008-11-01 00:15 821人阅读 评论(1) 收藏 举报
 
最近需要用一个在网页上显示一个树形的结构,原来的javascript脚本不是很适合,就是用了xloadtee,这个东西还是很好用的,
虽然还有一点点瑕疵,但是已经很好的达到了我的要求。
大概需要做的工作:
脚本引用:
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/js/xtree2.css">
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/js/xtree2.links.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/xtree2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/xloadtree2.js"></script>
使用个div在页面显示整个树:
<div style="position: absolute; width: 200px; top: 10px; left: 15px; height: 100%; padding: 5px; overflow: auto;">
<!-- js file containing the tree content, edit this file to alter the menu,
     the menu will be inserted where this tag is located in the document -->
<script type="text/javascript">
var tree = new WebFXTree("组织结构树");
tree.showRootNode = false;
tree.showRootLines = false;
tree.add(new WebFXLoadTreeItem("系统", "/sectiontree.do"));
tree.expandAll();
tree.write();
</script>
</div>
 
页面部分即可完成,下面是服务器端的代码:
 
 public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  response.setContentType("text/xml; charset=gbk");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);
  PrintWriter out = response.getWriter();
  String id = request.getParameter("id");
  Session ss = SessionHolder.getSessionHolder().currentSession();
  Document doc = new Document(new Element("tree"));
  if (id == null) {
   // 取得根节点
   String root = "select s from Section s inner join fetch s.children where s.parent.section_id is null";
   Query query = ss.createQuery(root);
   transfer(doc, query);
  } else {
   // 取得当前节点的id
   int sid = Integer.parseInt(id);
   String child = " from Section s where s.section_id=:id";
   Query query = ss.createQuery(child);
   query.setInteger("id", sid);
   transfer(doc, query);
  }
  SessionHolder.getSessionHolder().closeSession(ss);
  Format format = Format.getCompactFormat();
  format.setEncoding("gbk");
  format.setIndent("/t");
  XMLOutputter xout = new XMLOutputter(format);
  xout.output(doc, out);
  out.flush();
  out.close();
  return null;
 }
 private void transfer(Document doc, Query query) {
  List r = query.list();
  Section s = (Section) HibernateUtil.uniqueResult(r);
  for (Iterator it = s.getChildren().iterator(); it.hasNext();) {
   Section one = (Section) it.next();
   Element tree = doc.getRootElement();
   Element inner = new Element("tree").setAttribute("text", one
     .getName());
   tree.addContent(inner);
   if (!one.isLast())
    inner.setAttribute("src", "/TechCS/sectiontree.do?id="
      + one.getSection_id());
   inner.setAttribute("action", "javascript:setsection("
     + one.getSection_id() + ")");
  }
 }
以上部分就可以完成树结构的服务器部分。
说明:使用struts+hibernate。

posted on 2012-08-12 21:35 ** 阅读(303) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

公告

你好!

常用链接

留言簿(2)

随笔档案

文章分类

文章档案

新闻档案

相册

收藏夹

C#学习

友情链接

搜索

最新评论

阅读排行榜

评论排行榜