首先下载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="所选节点" οnclick="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());
}