您的位置:首页 > 产品设计 > UI/UE

Easyui异步生成树节点,动态获取树节点

2014-03-23 16:29 513 查看
直接上代码

前台:

// 实例化树菜单
$("#tree").tree({
url:'../servlet/Nodes_Do?id=0',
onBeforeExpand:function(node,param){
$('#tree').tree('options').url = "../servlet/Nodes_Do?id=" + node.id;
},
loadFilter: function(data){
if (data.msg){
return data.msg;
} else {
return data;
}
},
lines : true,
onClick : function(node) {
if (node.attributes) {
openTab(node.text, node.attributes.url);
}
}
});
});
//点击树节点center获取URL内容
function openTab(text, url) {
if ($("#tabs").tabs('exists', text)) {
$("#tabs").tabs('select', text);
} else {
var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="
+ url + "></iframe>";
$("#tabs").tabs('add', {
title : text,
closable : true,
content : content
});
}
}

后台servlet:

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String theIdString = request.getParameter("id");//父节点id
//System.out.println(theIdString);
int id=Integer.parseInt(theIdString);
List<Tree> list=schoolTree(id);
//System.out.println(list.get(1));
String sc="[";
for(Tree tree:list){
sc+="{";
List<Tree> l=schoolTree(tree.getId());
if(l.size()!=0){
sc+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"state\": \"closed\"", tree.getId() ,tree.getText());
}else{
sc+=String.format("\"id\": \"%s\", \"text\": \"%s\", \"attributes\":  \"{%s}\" , \"state\": \"\"", tree.getId() ,tree.getText(),tree.getAttributes());
}
sc+="},";
}
sc=sc.substring(0, sc.length() - 1);
sc+="]";
JSONObject  jobj = new JSONObject();
jobj.put("msg",sc);
response.getWriter().write(jobj.toString());
//System.out.println(jobj.toString());
}
public List<Tree> schoolTree(int id){
Tree t = new Tree();
t.setId(id);
return t.SchoolTree(t);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}

其他类:

public class Tree {
private int id;
private int pid;
private String text;
private String attributes;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getAttributes(){
return attributes;
}
public void setAttributes(String attributes){
this.attributes = attributes;
}
public List<Tree> SchoolTree(Tree tree) {
List<Tree> list = null;
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "";

try {
list = new ArrayList<Tree>();
conn = DBConnection.getConnection();
sql = "SELECT id,pid,text,attributes FROM tree where pid= "+tree.getId();
sql.toUpperCase();
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
Tree s = null;
while (rs.next()) {
s = new Tree();
s.setId(rs.getInt("id"));
s.setPid(rs.getInt("pid"));
s.setText(rs.getString("text"));
s.setAttributes(rs.getString("attributes"));
list.add(s);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBConnection.close(rs, ps, conn);
}
return list;
}
}

数据表简单设计:



简单说明一下,在数据库中存4个值:id,pid,text,attributes,id是主键,pid代表父节点的位置编号,text是树节点的名字,和前台树节点属性对应,attributes存放树节点指定的url,这个也是和前台树节点属性对应的。

前台先传了一个id=0代表根节点,后台根据传过来的这个值来查询这个根节点的孩子,即2、3两条,放到list里,for循环中指定 了获得数据库记录后的输出格式——json的形式,并有个判断,如果没有孩子节点了,树节点图标就以文件的形式展现,如果还有孩子,则以文件夹的形式展现。

最后效果:



点击节点右侧会弹出页面。

整个项目的下载地址:

http://download.csdn.net/detail/u011250851/7085913


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: