使用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" 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());
?}