闲来无事，写个jQuery zTree v2.5的小例子仅供参考

就写这样一个小例子

testTree.html中

引入

HTML中加载树的id

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方法

}

这回小案例就完成了，用的话直接复制粘贴到文件就可以了。

闲来无事，写个jQuery zTree v2.5的小例子仅供参考

猜你喜欢