`
阿尔萨斯
  • 浏览: 4205592 次
社区版块
存档分类
最新评论

利用Ext Js生成动态树

 
阅读更多

利用Ext Js生成动态树

今天在公司帮同事写了个用Ext Js生成动态树的Demo，在这里分享一下，也好供以后自己查阅。

一. 需求

  1. 要求生成一颗部门树，初始只列出根部门
  2. 当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点
  3. 部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单

二. 关键类

这里主要涉及Ext JS的两个类:

  • Ext.tree.TreeNode
  • Ext.menu.Menu

相关API可以参考：http://extjs.com/deploy/ext/docs/

三. 代码示例

1. 先看一下测试页面

  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
  4. <title>ReorderTreePanel</title>
  5. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  6. <scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script>
  7. <scripttype="text/javascript"src="../../ext-all.js"></script>
  8. <scripttype="text/javascript"src="reorder.js"></script>

  10. <!--CommonStylesfortheexamples-->
  11. <linkrel="stylesheet"type="text/css"href="../shared/examples.css"/>
  12. <linkrel="stylesheet"type="text/css"href="../shared/lib.css"/>

  14. <scripttype="text/javascript">
  15. /**************
  16. onload事件
  17. ***************/
  18. window.onload=function(){
  19. createTree(3);
  20. }
  21. </script>

  23. </head>
  24. <body>
  25. <scripttype="text/javascript"src="../shared/examples.js"></script>
  26. <h1>现在要生成一颗动态树</h1>
  27. <divid="container">
  28. </div>
  29. </body>
  30. </html>

2. 再看一下生成树的函数

  1. /***********************************
  2. 创建树
  3. bychb
  4. ************************************/
  5. functioncreateTree(n){

  7. Ext.QuickTips.init();
  8. varmytree=newExt.tree.TreePanel({
  9. el:"container",
  10. animate:true,
  11. title:"Extjs动态树",
  12. collapsible:true,
  13. enableDD:true,
  14. enableDrag:true,
  15. rootVisible:true,
  16. autoScroll:true,
  17. autoHeight:true,
  18. width:"30%",
  19. lines:true
  20. });
  22. //根节点
  23. varroot=newExt.tree.TreeNode({
  24. id:"root",
  25. text:"集团公司",
  26. expanded:true
  27. });

  29. for(vari=0;i<n;i++){
  30. varsub1=newExt.tree.TreeNode({
  31. id:i+1,
  32. text:"子公司"+(i+1),
  33. singleClickExpand:true,
  34. listeners:{
  35. //监听单击事件
  36. "click":function(node){
  37. myExpand(node);
  38. },
  39. //监听右键
  40. "contextmenu":function(node,e){
  41. //列出右键菜单
  42. menu=newExt.menu.Menu([
  43. {
  44. text:"打开当前节点",
  45. icon:"list.gif",
  46. handler:function(){
  47. myExpand(node);
  48. }
  49. },
  50. {
  51. text:"编辑当前节点",
  52. icon:"list.gif",
  53. handler:function(){
  54. alert(node.id);
  55. }
  56. },
  57. {
  58. text:"删除当前节点",
  59. icon:"list.gif",
  60. handler:function(){
  61. alert(node.id);
  62. }
  63. }]);
  64. //显示在当前位置
  65. menu.showAt(e.getPoint());
  66. }
  67. }
  68. });
  69. root.appendChild(sub1);
  70. }
  71. mytree.setRootNode(root);//设置根节点

  73. mytree.render();//不要忘记render()下,不然不显示哦
  74. }

3. 展开子节点的代码

  1. /******************************************
  2. 展开节点
  3. ******************************************/
  4. functionmyExpand(node){
  5. if(node.id=='1'){
  6. if(node.item(0)==undefined){
  7. node.appendChild(newExt.tree.TreeNode({
  8. id:node.id+'1',
  9. text:node.text+"的第一个儿子",
  10. hrefTarget:"mainFrame",
  11. listeners:{//监听
  12. "click":function(node,e){
  13. expand2(node)
  14. }
  15. }
  16. }));
  17. }

  19. node.expand();

  21. }elseif(node.id=='2'){
  22. node.appendChild(newExt.tree.TreeNode({
  23. id:node.id+'2',
  24. text:node.text+"的第一个儿子",
  25. hrefTarget:"mainFrame",
  26. listeners:{//监听
  27. "click":function(node){
  28. expand2(node)
  29. }
  30. }
  31. }));
  32. }else{
  33. alert(node.id+"没有子部门了");
  34. }
  36. }

读者可以自己运行一下如上代码，会发现如下现象：无论点击“子公司1”多少次，只会列出“子公司1的第一个儿子”一个节点，而每点击一次“子公司2”，就会多出一个“子公司2的第一个儿子”节点，这是为什么呢？

因为每次点击都会激发myExpand函数，而“子公司1”上加了node.item(0)==undefined的判断，这里明白了？

即：如果该部门下没有子部门，则载入子部门，否则只展开，不重新载入。

截图

好了，就到这里吧，困了，就不详细解释了o(∩_∩)o...哈哈

分享到：
| 今天早上坐公车亲眼目睹猥琐男掏出了一个MM ...
评论
发表评论

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

相关推荐

    利用Ext Js生成动态树实例代码

    今天在公司帮同事写了个用Ext Js生成动态树的Demo，在这里分享一下，也好供以后自己查阅。

    ext利用js生成树

    整个框架已经搭建成功，只要导入其中使用即可，欢迎大家多多下载

    java_jsp项目源码_龙门物流管理系统(Ext+SSH)130221.rar

    该系统采用Ext JS作为前端框架，Struts2和Hibernate作为后端框架，实现了物流企业从订单管理、货物管理、车辆管理到财务管理的全方位信息化管理。 系统主要功能如下： 1. 订单管理：支持订单的创建、修改、查询和...

    log4Net详解(共2讲)

    Extjs在经过两年的发展，Ext JS从2.0版开始，越来越受用户欢迎，今年，Extjs不但推出3.0版本，而且还推出了Ext Core,准备在Web2.0网站开发中占一席之地，如在 Extjs2.x版本中为人所诟病的速度问题在ExtJs3.0中有所...

    New of GWT Introduction--GWT开发快速入门

    这种情况下，我们就可以既充分利用Java语言的开发优势降低Ajax应用开发的难度，加快Ajax应用的开发速度，为Ajax的大规模应用创造可能，又可以充分发挥Ajax技术的优势，创建更加动态和交互性更好的Web应用程序，提升...

    小狗：用于构建静态原型的入门套件和交付系统

    删除任何.json ， .yml ，或.js使用的文件导出函数到此目录和访问在嫩枝模板所得的数据{{ site.data['path/to/file.ext'] }} 由提供技术支持。 样式由编写， 在于 。 。 在构建时使用以便他们可以利用在构建时， ...

    php上传进度条APC

    系统会把 APC_UPLOAD_PROGRESS域的值前面加上'upload_'生成钩子名称。在其它的php程序中就可以用apc_fetch()这个函数得到该文件的一系列信息了。假设APC_UPLOAD_PROGRESS的值是45c7f4d0b5f5b，那么在php中就可以这样...

    70款经典Dreamweaver插件

    justsoalt 用于在你的图片上加入alt标记，它可以利用模板一次为多张图片加入alt说明 calendarPopup 一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定...

    Dreamweaver 插件集

    用于在你的图片上加入alt标记，它可以利用模板一次为多张图片加入alt说明 calendarPopup 一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定日历的格式...

    iuhyiuhkjh908u0980

    PrettyFaces优雅的解决了这个问题，包括诸如功能：网页装载行动，无缝的跟faces的导航整合，动态视图的ID分配和管理参数分析，无需配置，兼容其他JSF框架。P ... by zly06 2009-09-09 回复 (0) 相关博客 ant模板 ...

    计算机应用技术(实用手册)

    计算机应用技术 实用手册 Xnllz 2011.7.29 ...1．STANDARD CMOS SETUP（标准CMOS设定）用来设定日期、时间、软硬盘规格、工作类类型。...5．PNP/PCI Configurations 即插即用与PCI设备设定，一般为默认。...

    UniGUI 说明

    25. 动态生成 TTabSheet or TUniTabSheet ........................................................................... 22 26. UniGUI 中如果获得 Session情况 ...................................................

    .htaccess

    当然，这只在你知道你想拦截的IP地址时才有用，然而现在网上的大多数用户都使用动态IP地址，所以这并不是限制使用的常用方法。 &lt;br&gt;You can block an IP address by using: 你可以使用以下命令封禁一个IP地址...

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