使用struts2加ztree加jquery生成树形结构

首先下载ztree,然后引入到页面中。

前台页面：

<%@page contentType="text/html;charset=gbk"%>
<%@include file="/include/inc/top.inc"%>
<%@page buffer="none"%>
<%@page import="common.treebase.TreeBase"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%@page import="common.util.*"%>
<script language="javascript" src="/js/tree/jquery.ztree-2.6.js"></script>

<LINK href="/css/tree/zTreeIcons.css" type="text/css"  rel="stylesheet"/>
<LINK href="/css/tree/zTreeStyle.css" type="text/css"  rel="stylesheet"/>

</form>
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
<input type="button" value="所选节点" onclick="getSelectedNodes()"/>

</script>
  <SCRIPT LANGUAGE="JavaScript">
 var zTree;//树
 var setting;//参数设置
 var zTreeNodes = [] ;//数据
 setting = {
   async : true,//异步加载
   asyncUrl: "${path}/Perssion!getPerssionTree.action",//数据文件
   showLine: true,//显示虚线
   checkable : true,//复选框
   //checkType : { "Y": "p", "N": "s" },
   //下面的三个属性是同时出现的 用于关联父子节点
   isSimpleData : true,
   treeNodeKey : "id",
   treeNodeParentKey : "pId",
   nameCol : "name"
  };

 

 

 //所选节点
 function getSelectedNodes(){
  var selectedNode = zTree.getCheckedNodes();
  for(var i=0;i<selectedNode.length;i++)
  {
   alert(selectedNode[i].id);
  }
 }
 
 

 $(document).ready(function(){
  zTree = $("#tree").zTree(setting, zTreeNodes);
 });
  </SCRIPT>

 

前台页面会提交请求到后台的数据，

ZTREE要求的数据格式为：

[
 {"id":1, "pId":0, "name":"手机",iconSkin : "sim1"},
 {"id":11, "pId":1, "name":"诺基亚",iconSkin : "sim2"},
 {"id":12, "pId":1, "name":"三星",iconSkin : "sim3"},
 {"id":121, "pId":12, "name":"apple",iconSkin : "sim4"}
]

后台代码：

public void getPerssionTree() throws Exception{
  DataBase db = new DataBase();
  Connection con;
  PreparedStatement pstm;
  ResultSet rs;
  String sql = "select ID,Name,Parent from menus";
  StringBuffer sb = new StringBuffer();

//注意这里必须申明返回为GBK的格式，要不然jquery的ajax返回的数据显示为中文乱码
  response.setContentType("text/html;charset=gbk");
     PrintWriter out = response.getWriter();
    
     try {
   con = db.getPoolConnection("POOLNAME_SYSTEMMANAGE");
   pstm = con.prepareStatement(sql);
   rs = pstm.executeQuery();
   sb.append("[");
   while(rs.next())
   {
    String id = rs.getString("ID");
    String name = rs.getString("Name");
    String parent = rs.getString("Parent");
    if(rs.isLast())
    {
     sb.append("{\"id\":"+id+", \"pId\":"+parent+", \"name\":\""+name+"\",iconSkin : \"sim1\"}");
    }
    else
    {
     sb.append("{\"id\":"+id+", \"pId\":"+parent+", \"name\":\""+name+"\",iconSkin : \"sim1\"},");
    }
   }
   sb.append("]");
  } catch (Exception e) {
   e.printStackTrace();
  }
  System.out.println(sb.toString());
     out.println(sb.toString());
 }

评论

1 楼 okjbc 2012-05-15  

作者还是好好回去研究研究struts2，在写。