就写这样一个小例子
testTree.html中
引入
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/jquery-ztree-2.5.js"></script>
<script type="text/javascript" src="../js/tree1.js"></script>
HTML中加载树的id
<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
tree.js中:
var zTree;//全局对象
var setting = {
isSimpleData: true,
treeNodeKey: "id",
treeNodeParentKey: "pid",
showLine: true,
root: {
isRoot: true,
nodes: []
},
callback: {
expand: onExpand
}
};
function onExpand(event, treeId, treeNode){//加载子节点
var id = treeNode.id;
var param = {
id: id
};//加载子节点时,后台查询("select * from tree where pid ="+id)
//这里加入判断后,就不会出现点击 + 一次就重复加载连串的情况了。这里有的说用removeNode(treeNode)删除已经加载的数据,但是太麻烦了。经查zTreeapi v2.5.chm后还是用getNodeByParam(key, value)判断比较实用
/* 如:
if (!zTree.getNodeByParam("pid", id)) {//判断不是获取 pid=id的情况$.post("../TreeServlet?a=" + new Date().getTime(), param, function(data){
var obj = eval("(" + data + ")");
zTree.addNodes(treeNode, obj, false);//增加子节点addNodes(parentNode, newNodes, isSilent)
});
}
}
$().ready(function(){//加载父节点
//发送请求 jQuery.post(url, [data], [callback], [type])
var param = {
id: 0
};//发送参数id到服务器
$.post("../TreeServlet", param, function(data){//data接收服务器回送的数据
var obj = eval("(" + data + ")");//集合对象
zTree = $("#tree").zTree(setting, obj);
});
});
后台Java代码:
TreeDao中查询
public class TreeDao {
//根据pid查询
public static List<TreeNode> geTreeNodesByPid(String pid){
Connection conn =null;
PreparedStatement ps = null;
PreparedStatement ps1 = null;
ResultSet rs = null;
ResultSet rs1 = null;
List<TreeNode> list = null;
try {
conn = DBManger.getConnection();
String sql = "select * from tree where pid = "+pid;
ps = conn.prepareStatement(sql);
// ps.setString(1, pid);
rs = ps.executeQuery();
list = new ArrayList<TreeNode>();
while (rs.next()) {//遍历结果,取值赋值
TreeNode node = new TreeNode();
//取值rs.getString("id"),赋值node.setId(rs.getString("id"));
String id = rs.getString("id");
ps1 = conn.prepareStatement("select * from tree where pid ="+id);
// ps1.setString(1, id);
rs1 = ps1.executeQuery();
if (rs1.next()) {//如果有值的话,就说明有子节点
node.setIsParent(true);
}else {
node.setIsParent(false);
}
node.setId(id);
node.setPid(rs.getString("pid"));
node.setName(rs.getString("name"));
//node.setParent(rs.getBoolean("isParent"));
//取值赋值后,把数据封装到对象node里面,再把数据添加到list集合里面
list.add(node);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
DBManger.myClose(rs, ps, conn);
}
return list;
}}
TreeServlet中:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获得树的id值
String id = request.getParameter("id");//接收前台id
List<TreeNode> list = TreeDao.geTreeNodesByPid(id);
String jsonStr = JSONArray.fromObject(list).toString();
response.getWriter().println(jsonStr);//向前台发送数据
}
数据库连接:
Class.forName("com.mysql.jdbc.Driver");
connection= DriverManager.getConnection("jdbc:mysql://localhost:3306/tree", "root", "root");
库中表数据:
create table tree(id varchar(10),pid varchar(10),name varchar(50) );为了模拟表简单
这里Java中用到的json jar包和MySql数据库驱动jar就不列出了。
小结:
增加子节点时 zTree.addNodes(treeNode, obj, false);//增加子节点addNodes(parentNode, newNodes, isSilent),没有if判断前,每次点击+父节点都会加载重复数据比较麻烦。在网上查了下,都提供好多的增删改查节点的例子。但是遇到这种重复点击累加的情况,都说的不太清除。是大神们没遇到吗?最后只能自己慢慢查zTree api了,加入: if (!zTree.getNodeByParam("pid", id)) {//判断不是获取 pid=id的情况 ... }后,这个重复加载的情况才得以很好的解决了。所以在这里就稍微记录了下
算了还是把连接数据库和Java bean的代码也备了,省的代码不全,后期要用还要去别处找,麻烦:
DBManger :
public class DBManger {
private static Connection connection = null;
static{
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}}
public static Connection getConnection() {
try {
connection= DriverManager.getConnection("jdbc:mysql://localhost:3306/tree", "root", "root");
} catch (SQLException e) {
e.printStackTrace();
}
return connection;
}
public static void myClose(ResultSet rs,PreparedStatement ps,Connection conn){
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}finally{
rs = null;//确保连接关闭,释放资源
}}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}finally{
ps = null;
}}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}finally{
conn = null;
}}}}
TreeNode :
public class TreeNode {
private String id;
private String pid;
private String name;
private boolean isParent;
...字段的setter和getter方法
}
这回小案例就完成了,用的话直接复制粘贴到文件就可以了。