xloadtree2使用手记

xloadtree2使用手记

 

工作中做了一些系统，都涉及到了树形结构，基本上都是以动态树形显示为组，像组织机构、指标体系的显示，到目前为止主要是使用xtree、xloadtree来完成了，每一次使用都是在逐步改造，今天就此做一下总结。

  本次以xtree2、xloadtree2、xtree2.css为例进行说明，xtree2为xtree的升级版，总体感觉还是蛮好用的，以前也用过xtree了的。本次详细改造文件可以参见xtree2.js，xloadtree2.js，xtree2.css，所有改造都留有//wzw modi by 时间 .....

  改造项：

  1、xtree2.css:样式将节点底色改为红色，便于高亮显示；
  2、xtree2.js :增加自定义属性value，主要是给xloadtree2.js使用；
  3、xloadtree2.js:将以ajax传递的xml片段进行改造，原来xml都是以属性处理的，改为后为以节点值（<![CDATA[ ]]>）进行处理，避免字符串引发的属性值问题。

  界面项：

  1、动态树

<link href="xtree2.css" rel="stylesheet" type="text/css">
<script src="xtree2.js"></script>
<script src="xloadtree2.js"></script>

<div height="350" width="280">
<script language="javascript" type="text/javascript">
 //动态树
 var tree;
 tree = new WebFXLoadTree("组织机构","$link.ContextPath/cs/test/OrganAction.do?method=ajax&timestamp="+new Date().getTime(),"javascript:fun();")

 tree.write();
</script>

<script language="javascript" type="text/javascript">
function fun()
{
 alert(tree.getSelected().getValue());
}
</script>

</div>

  2、静态树

<link href="xtree2.css" rel="stylesheet" type="text/css">
<script src="xtree2.js"></script>
<script src="xloadtree2.js"></script>

<div height="350" width="280">

 

<script language="javascript" type="text/javascript">
 //静态树
 var tree = new WebFXTree("基础数据", "$link.contextPath/basedata/IndexAction.do?method=view");
  tree.setBehavior('classic'); 
  
  var organ = new WebFXTreeItem("组织机构", "javascript:void(0);");
  tree.add(organ);
  
  var menu = new WebFXTreeItem("组织机构", "$link.contextPath/basedata/OrganAction.do?method=main");
  organ.add(menu);
  
  var menu = new WebFXTreeItem("部门列表", "$link.contextPath/basedata/DepartmentAction.do?method=query");
  organ.add(menu);
  
     tree.write();  

</script>

</div>

  服务端项：

  1、AjaxAction.java：主要用于将节点进行拼接后输出。 

public ActionForward query(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response,
   ActionContext context) throws Exception {

  return mapping.findForward("query");
 }

 @SuppressWarnings("unchecked")
 public ActionForward ajax(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response,
   ActionContext context) throws Exception {

  String parent_id = request.getParameter("parent_id");

  OrganService os = OrganService.getInstance();

  String subTree = "";
  String text = "";
  String value = "";
  String action = "";
  String src = "";

  // 获取本人所在机构
  if (parent_id == null) {
   String organ_id = "42050000";
   Organ organ = os.retrieveOrgan(organ_id);
   if (organ != null) {
    text = organ.getOrgan_name();
    value = organ_id;  
    action = "javascript:alert('" + value + "');";
    src = "/cs/test/OrganAction.do?method=ajax&parent_id="+organ_id;
    subTree += TreeHelp.getSubTree(text, value, action, src);
   }

   TreeHelp.outputTree(response, subTree);
   return null;
  }

  // 获取子机构
  Map params = new HashMap();
  params.put("parent_id", parent_id);
  params.put("orderBy", "sort_order desc");

  List<Organ> organList = os.queryOrganForList(params);
  for (int i = 0; i < organList.size(); i++) {

   text = organList.get(i).getOrgan_name();
   value = organList.get(i).getOrgan_id();
   action = "javascript:fun();";
   //TODO 此处要对子节点数查询后再来给src赋值
   //src = "/cs/test/OrganAction.do?method=ajax&parent_id=" + value;

   subTree += TreeHelp.getSubTree(text, value, action, src);
  }

  TreeHelp.outputTree(response, subTree);
  return null;
 }

  2、TreeHelp.java：主要用于将节点进行拼接后输出。

public class TreeHelp {

 public static String getSubTree(String text, String value, String action,
   String src) {

  if (text == null) {
   text = "空";
   System.err.println(text + "|" + value + "|" + action + "|" + src);
  }
  if (value == null) {
   value = "";
   System.err.println(text + "|" + value + "|" + action + "|" + src);
  }
  if (action == null) {
   action = "javascript:void(0)";
  }
  if (src == null)
   src = "";
  
  String subtree = " <tree>";  
  subtree += "  <text>";
  subtree += "   <![CDATA["+text+"]]>";
  subtree += "  </text>";
  
  //进行src过滤后，在树形上直接是以叶结点的形式展形，让用户知道是最底层节点了，此种实现必须对当前节点的子节点数进行查询，如果子节点为0，则src为空字符
  if (src.length()>0)
  {
   subtree += "  <src>";
   subtree += "   <![CDATA["+Config.CONTEXT+src+"]]>";
   subtree += "  </src>";
  }
  subtree += "  <action>";
  subtree += "   <![CDATA["+action+"]]>";
  subtree += "  </action>";

  subtree += "  <value>";
  subtree += "   <![CDATA["+value+"]]>";
  subtree += "  </value>";

  subtree += " </tree>/r/n";
  return subtree;
 }

 public static String outputTree(HttpServletResponse response, String subTree)
   throws Exception {
  String tree = "";
  tree = "<?xml version=/"1.0/"?>";
  tree += "<tree>/r/n";

  //设置编码方式，便于中文输出，ajax返回值是UTF-8格式的，所以此处以UTF-8格式输出
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();  
  response.setContentType("text/xml");
  response.setHeader("Pragma", "No-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);

  tree += subTree;
  tree += "</tree>";
  out.println((tree));
  out.close();
  
  System.out.println(tree);

  return tree;
 }