`

Ext.tree.TreePanel

EXTjsonJSPMySQLCSS 
阅读更多

转载：http://blog.csdn.net/tinyyys/archive/2009/03/2**027142.aspx

个人只是进行了测试，理解而已。原文中使用的数据库是SQL 2000的，而本人使用的是mysql，故做了一点点的更改。

【注意】：以下所有引用资源的路径都是根据自己的资源位置来配置的。

第一步：创建treePanel.html

Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  5. <title>测试Ext.tree.TreePanel</title>
  6. <linkrel="stylesheet"type="text/css"href="../static/lib/ext/resources/css/ext-all.css"/>
  7. <scripttype="text/javascript"src="../static/lib/ext/adapter/ext/ext-base.js"></script>
  8. <scripttype="text/javascript"src="../static/lib/ext/ext-all.js"></script>
  9. <linkrel="stylesheet"type="text/css"href="../style/comment.css"/>
  10. <scripttype="text/javascript"src="../js/treePanel.js"charset="utf-8"></script>
  11. <linkrel="shortcuticon"href="x.ico"/>
  12. </head>
  13. <body>
  14. <divid="tree-panel"style="overflow:auto;height:600px;width:200px;border:2pxsolid#c3daf9;"></div>
  15. </body>
  16. </html>

第二步：创建含Ext.onRready函数的treePanel.js文件

Code:
  1. Ext.onReady(function(){
  2. Ext.QuickTips.init();//浮动信息提示
  3. Ext.BLANK_IMAGE_URL='../static/lib/ext/resources/images/default/s.gif';//替换图片文件地址为本地
  5. //创建一个简写
  6. var_Tree=Ext.tree;
  7. //定义根节点的Loader
  8. var_treeloader=new_Tree.TreeLoader({
  9. //dataUrl:'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置
  10. });
  11. //添加一个树形面板
  12. var_treepanel=new_Tree.TreePanel({
  13. //renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
  14. el:'tree-panel',//将树形添加到一个指定的div中,非常重要！
  15. region:'west',
  16. title:'功能菜单',
  17. width:200,//面板宽度
  18. minSize:180,
  19. maxSize:250,
  20. split:true,
  21. autoHeight:false,
  22. frame:true,//美化界面
  23. //title:'可编辑和拖动的异步树',//标题
  24. //autoScroll:true,//自动滚动
  25. enableDD:true,//是否支持拖拽效果
  26. containerScroll:true,//是否支持滚动条
  27. rootVisible:true,//是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性
  28. border:true,//边框
  29. animate:true,//动画效果
  30. loader:_treeloader//树加载
  31. });
  33. //异步加载根节点
  34. var_rootnode=new_Tree.AsyncTreeNode({
  35. id:'0',
  36. text:'家电品牌总类',
  37. draggable:false,//根节点不容许拖动
  38. expanded:true
  39. });
  40. //为tree设置根节点
  41. _treepanel.setRootNode(_rootnode);
  43. //响应加载前事件，传递node参数
  44. _treepanel.on('beforeload',function(node){
  45. _treepanel.loader.dataUrl='tree.jsp?parentId='+node.id;//定义子节点的Loader
  46. });
  48. //渲染树形
  49. _treepanel.render();
  50. //展开节点,第一个参数表示是否级联展开子节点
  51. _rootnode.expand(false);
  53. //设置树的点击事件【测试点击事件不影响树的其他效果】
  54. var_treeClick=function(node,e){//contentPanel为定义的TabPanel
  55. if(node.isLeaf()){
  56. e.stopEvent();
  57. varn=contentPanel.getComponent(node.id);//通过node的id获取组件
  58. if(!n){//如果不存在则new一个出来
  59. varn=contentPanel.add({
  60. 'id':node.id,
  61. 'title':node.text,
  62. closable:true,
  63. autoLoad:{
  64. url:'tabFrame.jsp?url=grid.html',
  65. scripts:true
  66. }//通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
  67. });
  68. }
  69. contentPanel.setActiveTab(n);
  70. }
  71. }
  73. //增加鼠标单击事件
  74. _treepanel.on('click',_treeClick);
  78. //定义右键菜单
  79. varrightClick=newExt.menu.Menu({
  80. id:'rightClickCont',
  81. items:[{
  82. id:'rMenu1',
  83. text:'添加节点',
  84. //增加菜单点击事件
  85. handler:function(){
  86. alert('添加节点的实现！');
  87. }
  88. },{
  89. id:'rMenu2',
  90. text:'编辑节点'
  91. },{
  92. id:'rMenu3',
  93. text:'删除节点'
  94. }]
  95. });
  96. //增加右键点击事件
  97. _treepanel.on('contextmenu',function(node,event){//声明菜单类型
  98. event.preventDefault();//阻止浏览器默认右键菜单显示
  99. rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
  100. });
  102. /*
  103. *设置tree的节点放置函数此函数有一个很重要的参数对象ee对象有三个重要的属性，分别为dropNode,target,point
  104. *1.dropNode为在拖动时鼠标抓住的节点2.target为将要放置在某处的节点
  105. *3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。
  106. *
  107. */
  109. _treepanel.on('nodedrop',function(e){
  110. if(e.point=='append'){
  111. alert('当前"'+e.dropNode.text+'"划到"'+e.target.text+'"里面！');
  112. }elseif(e.point=='above'){
  113. alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');
  114. }elseif(e.point=='below'){
  115. alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');
  116. }
  117. });
  119. //在原有的树形添加一个TreeEditor
  120. var_treeEditer=new_Tree.TreeEditor(_treepanel,{
  121. allowBlank:false
  122. });
  124. /*
  125. *为创建的treeEditer添加事件有两个事件最为常用，一个为beforestartedit另一个为complete
  126. *从名字就可以看出，beforestartedit事件是在编辑前的事件，因此可以通过它来判断那些节点可以编辑那些不可以。
  127. *complete为编辑之后的事件，在这里面可以添加很多事件，比如添加一个Ext.Ajax向后台传送修改的值等等。
  128. */
  130. _treeEditer.on("beforestartedit",function(_treeEditer){
  131. var_tempNode=_treeEditer.editNode;//将要编辑的节点
  132. if(_tempNode.isLeaf()){//这里设定叶子节点才容许编辑
  133. returntrue;
  134. }else{
  135. returnfalse;
  136. }
  137. });
  139. _treeEditer.on("complete",function(_treeEditer){
  140. Ext.Msg.alert("被修改为"+_treeEditer.editNode.text);
  141. });
  143. //（1）通过TabPanel控件的html属性配合<iframe>实现。该方法是利用
  144. //html属性中包含<iframe>的语法来调用另一个页面，具体见代码。
  145. //（2）通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性，它有很多参数，
  146. //其中有两个比较重要，url表示要载入的文件，scripts表示载入的文件是否含有脚本，该属性相当重要，
  147. //如果在新的页面中要创建Ext控件，必须指定该参数。该方法实现较前一个复杂，因为引入的文件不是一个完整的html文件，
  148. //有可能只是内容的一部分，但是资源占用较少，而且载入速度较快（它有一个载入指示）
  150. //添加第一个节点(html)
  151. _treepanel.root.appendChild(newExt.tree.TreeNode({
  152. id:'htmlPanel',
  153. text:'通过html打开',
  154. listeners:{
  155. 'click':function(node,event){
  156. event.stopEvent();
  157. varn=contentPanel.getComponent(node.id);
  158. if(!n){//判断是否已经打开该面板
  159. n=contentPanel.add({
  160. 'id':node.id,
  161. 'title':node.text,
  162. closable:true,//通过html载入目标页
  163. html:'<iframescrolling="auto"frameborder="0"width="100%"height="100%"src="grid.html"></iframe>'
  164. });
  165. }
  166. contentPanel.setActiveTab(n);
  167. }
  168. }
  170. }));
  172. //添加第二个节点(autoLoad)
  173. _treepanel.root.appendChild(newExt.tree.TreeNode({
  174. id:'autoLoadPanel',
  175. text:'通过autoLoad打开',
  176. listeners:{
  177. 'click':function(node,event){
  178. event.stopEvent();
  179. varn=contentPanel.getComponent(node.id);
  180. if(!n){////判断是否已经打开该面板
  181. n=contentPanel.add({
  182. 'id':node.id,
  183. 'title':node.text,
  184. closable:true,
  185. autoLoad:{
  186. url:'tabFrame.jsp?url=grid.html',
  187. scripts:true
  188. }//通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
  189. });
  190. }
  191. contentPanel.setActiveTab(n);
  192. }
  193. }
  194. }));
  196. //右边具体功能面板区
  197. varcontentPanel=newExt.TabPanel({
  198. region:'center',
  199. enableTabScroll:true,
  200. activeTab:0,
  201. items:[{
  202. id:'homePage',
  203. title:'首页',
  204. autoScroll:true,
  205. //closable:true,
  206. html:'<divclass="tabPanel-treePanel">Tree控件和TabPanel控件结合功能演示</div>'
  207. }]
  208. });
  210. newExt.Viewport({
  211. layout:'border',//使用border布局
  212. defaults:{
  213. activeItem:0
  214. },
  215. items:[_treepanel,contentPanel]
  216. });
  219. });

其实这样子就可以运行了，只是动态加载的数据无法加载进去而已。以下是从后台数据库获取json格式数据的操作。

1)建立一个树节点的bean，封装一个树节点。

2)连接数据库，做相关操作之后，以json格式数据传回_treepanel.loader.dataUrl='tree.jsp?parentId='+node.id;//定义子节点的Loader。【实际上，就是一个字符串】

3)tree.jsp

Code:
  1. <%@pagelanguage="java"pageEncoding="utf-8"%>
  3. <jsp:useBeanclass="com.xxx.javabean.JSONTree"id="JSONTree"></jsp:useBean>
  5. <%
  6. StringparentId="";
  7. if(request.getParameter("parentId")!=null){
  8. parentId=request.getParameter("parentId").toString();
  9. }
  10. JSONTree.setparentId(parentId);
  11. %>
  12. <%=JSONTree.getJSONString()%>
Code:
  1. packagecom.xxx.javabean;
  3. /**
  4. *@authornothing2012
  5. *定义树节点的属性，包括节点ID、Text、图标、是否为叶子节点、是否展开等。
  6. */
  8. publicclassJSONTreeNode{
  9. privateStringid;//ID
  10. privateStringtext;//节点显示
  11. privateStringcls;//图标
  12. privatebooleanleaf;//是否叶子
  13. privateStringhref;//链接
  14. privateStringhrefTarget;//链接指向
  15. privatebooleanexpandable;//是否展开
  16. privateStringdescription;//描述信息
  17. publicStringgetId(){
  18. returnid;
  19. }
  20. publicvoidsetId(Stringid){
  21. this.id=id;
  22. }
  23. publicStringgetText(){
  24. returntext;
  25. }
  26. publicvoidsetText(Stringtext){
  27. this.text=text;
  28. }
  29. publicStringgetCls(){
  30. returncls;
  31. }
  32. publicvoidsetCls(Stringcls){
  33. this.cls=cls;
  34. }
  35. publicbooleanisLeaf(){
  36. returnleaf;
  37. }
  38. publicvoidsetLeaf(booleanleaf){
  39. this.leaf=leaf;
  40. }
  41. publicStringgetHref(){
  42. returnhref;
  43. }
  44. publicvoidsetHref(Stringhref){
  45. this.href=href;
  46. }
  47. publicStringgetHrefTarget(){
  48. returnhrefTarget;
  49. }
  50. publicvoidsetHrefTarget(StringhrefTarget){
  51. this.hrefTarget=hrefTarget;
  52. }
  53. publicbooleanisExpandable(){
  54. returnexpandable;
  55. }
  56. publicvoidsetExpandable(booleanexpandable){
  57. this.expandable=expandable;
  58. }
  59. publicStringgetDescription(){
  60. returndescription;
  61. }
  62. publicvoidsetDescription(Stringdescription){
  63. this.description=description;
  64. }
  65. }
Code:
  1. packagecom.xxx.javabean;
  3. importjava.sql.Connection;
  4. importjava.sql.DriverManager;
  5. importjava.sql.ResultSet;
  6. importjava.sql.SQLException;
  7. importjava.sql.Statement;
  8. importjava.util.ArrayList;
  9. importjava.util.List;
  11. importnet.sf.json.JSONArray;
  13. /*
  14. *@createbynothing2012
  15. */
  16. publicclassJSONTree{
  17. privateStringparentId;
  19. publicStringgetJSONString(){
  20. Connectioncon=null;
  21. Statementst=null;
  22. ResultSetrs=null;
  23. List<JSONTreeNode>treeNodeArray=null;
  24. //传一个父节点的ID过来
  25. StringSQLString="SELECT*FROMCategoriesWHEREparentId="
  26. +this.parentId+"ORDERBYcategoryId";
  27. try{
  28. Class.forName("com.mysql.jdbc.Driver");
  29. DriverManager.registerDriver(newcom.mysql.jdbc.Driver());
  30. StringDbConn="jdbc:mysql://localhost:3306/extjs";
  31. StringDbPass="root";
  32. con=DriverManager.getConnection(DbConn,"root",DbPass);
  33. st=con.createStatement();
  34. //查找所有拥有下级类别的类别ID//不同的记录属于同一个parentID，故使用groupby
  35. rs=st
  36. .executeQuery("SELECTparentIdFROMCategoriesWHEREparentId>0GroupByparentIdOrderByparentId");
  37. StringBufferparentIDBuffer=newStringBuffer();
  38. parentIDBuffer.append("|");
  39. while(rs.next()){
  40. parentIDBuffer.append(rs.getString("parentId"));
  41. parentIDBuffer.append("|");
  42. }
  43. //得到所有的parentcategoryId列表
  44. StringparentIDString=parentIDBuffer.toString();
  45. System.out.println(parentIDString);//测试|1|2|3|4|5|6|7|8|
  46. rs=st.executeQuery(SQLString);//第一次传进来的parentID是0
  47. treeNodeArray=newArrayList<JSONTreeNode>();
  48. while(rs.next()){
  49. JSONTreeNodetreeNode=newJSONTreeNode();
  50. StringcategoryId=rs.getString("categoryId");
  51. treeNode.setId(categoryId);
  52. treeNode.setText(rs.getString("categoryName"));
  53. treeNode.setDescription(rs.getString("description"));
  54. //treeNode.setHref("rightframe.jsp?categoryId="
  55. //+rs.getString("categoryId").toString());
  56. //treeNode.setHrefTarget("rightFrame");
  57. System.out.println(parentIDString.indexOf("|"+categoryId+"|"));//测试
  58. if(parentIDString.indexOf("|"+categoryId+"|")>=0)//父节点如果大于0说它在父节点中存在
  59. {
  60. treeNode.setCls("folder");
  61. treeNode.setLeaf(false);
  62. treeNode.setExpandable(false);
  63. }else//子节点
  64. {
  65. treeNode.setCls("file");
  66. treeNode.setLeaf(true);
  67. treeNode.setExpandable(false);
  68. }
  69. treeNodeArray.add(treeNode);
  70. }
  71. JSONArrayJsonArray=JSONArray.fromObject(treeNodeArray);//得到JSON数组
  72. System.out.println("返回的数据是："+JsonArray.toString());
  73. returnJsonArray.toString();//返回JSON数据
  74. }catch(Exceptione){
  75. System.out.println("getJSONString()ofJSONTree.javathrows:"
  76. +e.toString());
  77. return"";
  78. }finally{
  79. try{
  80. if(con!=null&&!con.isClosed()){
  81. con.close();
  82. }
  83. }catch(SQLExceptione){
  84. //TODOAuto-generatedcatchblock
  85. e.printStackTrace();
  86. }
  87. }
  88. }
  90. publicStringgetparentId(){
  91. returnparentId;
  92. }
  94. publicvoidsetparentId(StringparentId){
  95. this.parentId=parentId;
  96. }
  97. }

效果图：

//需要导入的json-lib 包及其他包自行下载。测试完毕。

分享到：
| create table xx.sql
评论
2 楼 zzhyq 2012-08-15  
有没有后台是ASHX 的呀
1 楼 693593336 2012-06-25  
  谢谢作者分享，正好用上
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics