Ext实现tree的自动加载,生成枝节点和叶子节点。
本人超级初心,刚刚起步做编程,做了一个tree结构到自己的项目中。利用了treepanel等组件完成的,写的不算详细,希望给像我一样的朋友们一点帮助。
代码如下:
this.root = new Ext.tree.AsyncTreeNode({//定义了root为异步加载,不然出现的枝节点会无限加载的
id : 'root'
})
var dbtreeloader = new Ext.tree.TreeLoader({//定义了loader,向后台传送请求,然后返回json形式的数据
dataUrl : 'loadDataSource.action'
});
this.dbtabletree = new Ext.tree.TreePanel({
id : 'dbtabletree',
root : this.root,
loader : dbtreeloader,
animate : true,//动态加载
border : false,//不让树的底端出现边框
rootVisible : false//让root消失,有时候为了美观和功能需要这样做
})
dbtreeloader.addListener('beforeload',dbtreenode_expand , this);//为loader定义了监听事件,注意此处是dbtreeloader,不是dbtabletree,我就犯了这错误,找了半天……
function dbtreenode_expand(loader, node){
// alert(node.attributes.id)
if ('root' != node.attributes.id){//判断load的节点是否是root根节点以外的节点,如果是,只想一下语句
this.dbtabletree.loader.baseParams = node.attributes.id;//将节点的id属性传递给loader,使他明白是该节点
this.dbtabletree.loader.dataUrl = 'treeLoader.action?text=' + node.attributes.text;//然后改变url,向后台传输动作,执行节点的动作,出现该枝节点的叶子节点。ps:如果还想继续往下扩展,那就在后台继续判断。
}
}
设置的表很简单那,course,coursename,student,teacher四张表,里面属性就不说了,有id,有name什么的,实验表~~
下面是action函数,将请求读取出来,然后传送json形式数组,这里写的比较简单,如果有高人可以帮助我改进代码的话,小白本人会很高心滴>_<:
//这个是枝节点读取,读取出course,coursename,student,teacher。
public class LoadDataSource {
public String execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
String usename = "root";
String password = "dhcc";
String dburl = "jdbc:mysql://localhost/one";
String dbdriver = "com.mysql.jdbc.Driver";
response.setCharacterEncoding("UTF-8");
try {
Class.forName(dbdriver);
} catch (ClassNotFoundException e) {
System.out.println("找不到驱动程序类 ,加载驱动失败!");
e.printStackTrace();
}
Connection conn = null;
try{
conn = DriverManager.getConnection(dburl,usename,password);
Statement sc = conn.createStatement();
ResultSet rs = sc.executeQuery("show tables;");
rs.last();
int n = rs.getRow();
rs.beforeFirst();
String json = "[";
int number = 0;
while(rs.next()){
String nameid = rs.getString("Tables_in_one");
json += "{text:'" + nameid
+ "'}";
if(number < n-1){
json += ",";
}else{
json += "]";
}
number ++;
}
Writer writer = response.getWriter();
writer.write(json);
writer.close();
conn.close();
}catch(Exception e){
}
return null;
}
}
//下面方法是读取叶节点,注意下面有一部很重要哦!!红色标注!!
public class TreeLoader {
public String execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
response.setCharacterEncoding("UTF-8");
String usename = "root";
String password = "dhcc";
String dburl = "jdbc:mysql://localhost/one";
String dbdriver = "com.mysql.jdbc.Driver";
try {
Class.forName(dbdriver);
} catch (ClassNotFoundException e) {
System.out.println("找不到驱动程序类 ,加载驱动失败!");
e.printStackTrace();
}
Connection conn = null;
try {
conn = DriverManager.getConnection(dburl,usename,password);
Statement sc = conn.createStatement();
String text = request.getParameter("text");
ResultSet rs = sc.executeQuery("show fields from " + text);
rs.last();
int n = rs.getRow();
rs.beforeFirst();
int number = 0;
String json = "[";
while (rs.next()) {
String fieldname = rs.getString("Field");
json += "{text:'" + fieldname+ "'[color=red],leaf:true[/color]}";//这里如果不进行下一步扩展的话,就必须定义leaf的属性为true,不然树会无限循环下去的,这是node不是异步而造成的。
if (number < n - 1) {
json += ",";
} else {
json += "]";
}
number++;
}
Writer writer = response.getWriter();
writer.write(json);
writer.close();
conn.close();
} catch (Exception e) {
}
return null;
}
}
如上的代码虽然是每次都和数据库连接,但是因为前台界面不是一次展开的,所以效率还是可以接受的。如果有人指点一下,小弟不胜感激呀~~
好了,这样这个树就完成了,将treepanel放到什么地方都可以啦~~
有什么错误的地方大家指正下哈~
超级初心以上