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放到什么地方都可以啦~~
有什么错误的地方大家指正下哈~
超级初心以上