`
dyyaries
  • 浏览: 79996 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Extjs3.2+Json lib动态树与GridPanel简单展现

    博客分类：
  • Web
EXTJavajsonJSP入门 
阅读更多

最近项目中要用到Extjs，网上搜了写文档看了之后，写了个小Demo。

Demo描述：

将部门信息用树展示出来，点击树节点的某个部门之后，弹出一个窗口，该窗口中展示这个部门中员工的列表。

 

首先，到http://www.sencha.com/products/js/download.php下载Extjs3.2的发布包，因为要用到json lib，所以还要到http://sourceforge.net/projects/json-lib/files/json-lib/下载json lib。

 

mysql数据库脚本：

 

view plaincopy to clipboardprint?
  1. DROP TABLE IF EXISTS `dept`;  
  2. CREATE TABLE `dept` (  
  3.   `deptno` int(11) NOT NULL AUTO_INCREMENT,  
  4.   `deptname` varchar(255) NOT NULL DEFAULT '',  
  5.   `parentno` int(11) NOT NULL DEFAULT '0',  
  6.   PRIMARY KEY (`deptno`)  
  7. ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;  
  8. LOCK TABLES `dept` WRITE;  
  9. /*!40000 ALTER TABLE `dept` DISABLE KEYS */;  
  10. INSERT INTO `dept` VALUES (1,'管理部',0);  
  11. INSERT INTO `dept` VALUES (2,'销售部',0);  
  12. INSERT INTO `dept` VALUES (3,'人力资源部',0);  
  13. INSERT INTO `dept` VALUES (4,'开发部',0);  
  14. INSERT INTO `dept` VALUES (5,'后勤部',0);  
  15. INSERT INTO `dept` VALUES (6,'软件开发部',4);  
  16. INSERT INTO `dept` VALUES (7,'增值开发部',4);  
  17. INSERT INTO `dept` VALUES (8,'增值销售部',2);  
  18. INSERT INTO `dept` VALUES (9,'产品销售部',2);  
  19. INSERT INTO `dept` VALUES (10,'人妖部',3);  
  20. /*!40000 ALTER TABLE `dept` ENABLE KEYS */;  
  21. UNLOCK TABLES;  
  22. DROP TABLE IF EXISTS `emp`;  
  23. CREATE TABLE `emp` (  
  24.   `empno` int(11) NOT NULL AUTO_INCREMENT,  
  25.   `empname` varchar(255) NOT NULL DEFAULT '',  
  26.   `gender` int(11) NOT NULL DEFAULT '0',  
  27.   `job` varchar(255) NOT NULL DEFAULT '',  
  28.   `deptno` int(11) NOT NULL DEFAULT '0',  
  29.   PRIMARY KEY (`empno`),  
  30.   KEY `fk_deptno` (`deptno`)  
  31. ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;  
  32. LOCK TABLES `emp` WRITE;  
  33. INSERT INTO `emp` VALUES (1,'陈一',1,'staff boss',1);  
  34. INSERT INTO `emp` VALUES (2,'黄二',1,'technical boss',1);  
  35. INSERT INTO `emp` VALUES (3,'张三',0,'human resouce',3);  
  36. INSERT INTO `emp` VALUES (4,'李四',1,'developer leader',6);  
  37. INSERT INTO `emp` VALUES (5,'王五',1,'clerk',10);  
  38. INSERT INTO `emp` VALUES (6,'赵六',1,'clerk',6);  
  39. INSERT INTO `emp` VALUES (7,'钱七',1,'executor',6);  
  40. INSERT INTO `emp` VALUES (8,'孙八',1,'super man',6);  
  41. INSERT INTO `emp` VALUES (9,'方九',0,'oh, god',6);  
  42. INSERT INTO `emp` VALUES (10,'无名氏',0,'无语',6);  
  43. UNLOCK TABLES;  
  44. ALTER TABLE `emp`  
  45. ADD CONSTRAINT `fk_deptno` FOREIGN KEY (`deptno`) REFERENCES `dept` (`deptno`);  

 

 

 

下面建立web工程：

分别新建DeptModel,EmpModel,TreeModel和PageModel

DeptModel.java:

 

view plaincopy to clipboardprint?
  1. public class DeptModel {  
  2.     private int deptno;  
  3.     private String deptname;  
  4.     private int parentno;  
  5.          ...  
  6. }  

 

 

EmpModel.java:

 

view plaincopy to clipboardprint?
  1. public class EmpModel {  
  2.     private Integer empno;  
  3.     private String empname;  
  4.     private String gender;  
  5.     private String job;  
  6.     private Integer deptno;  
  7.          ...  
  8. }  

 

 

TreeModel.java，用于生成部门树的模型：

 

view plaincopy to clipboardprint?
  1. public class TreeModel {  
  2.     private int id;  
  3.     private String text;  
  4.     private boolean leaf;  
  5.     private List<TreeModel> children = new ArrayList<TreeModel>(0);  
  6.     public TreeModel(){  
  7.           
  8.     }  
  9.     /** 
  10.      * 根据部门列表获取形如 [{id:"",text:"",leaf:,children:[]},{...},...]的JSON字符串 
  11.      * @param models 部门列表List<DeptModel> 
  12.      * @return JSON格式的字符串，用于生成ext树 
  13.      */  
  14.     public String getJsonTreeModelString(List<DeptModel> models){  
  15.         List<TreeModel> lst = new ArrayList<TreeModel>(0);  
  16.         for(DeptModel dm : models){  
  17.             if(dm.getParentno()==0){  
  18.                 TreeModel root = new TreeModel();  
  19.                 root.setId(dm.getDeptno());  
  20.                 root.setText(dm.getDeptname());  
  21.                 List<TreeModel> children = getChildren(models,root);  //递归获取子集   
  22.                 if(children.size()>0){  
  23.                     root.setLeaf(false);  
  24.                     root.setChildren(children);  
  25.                 }else{  
  26.                     root.setLeaf(true);  
  27.                     root.setChildren(new ArrayList<TreeModel>(0));  
  28.                 }  
  29.                 lst.add(root);  
  30.             }  
  31.         }  
  32.         JsonConfig config = new JsonConfig();  
  33.         config.setExcludes(new String[]{"models"});  
  34.         config.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);     
  35.         return JSONArray.fromObject(lst,config).toString();  
  36.     }  
  37.     /** 
  38.      * 递归获取节点的子集的方法 
  39.      * @param models 部门列表 
  40.      * @param parentModel 根节点，即deptno=0的根节点部门 
  41.      * @return List<TreeModel> 树模型列表 
  42.      */  
  43.     public List<TreeModel> getChildren(List<DeptModel> models,TreeModel parentModel){  
  44.         List<TreeModel> lst = new ArrayList<TreeModel>(0);  
  45.         for(DeptModel dm : models){  
  46.             if(parentModel.getId() == dm.getParentno()){  
  47.                 TreeModel tm = new TreeModel();  
  48.                 tm.setId(dm.getDeptno());  
  49.                 tm.setText(dm.getDeptname());  
  50.                 List<TreeModel> children = getChildren(models,tm);  
  51.                 if(children.size()>0){  
  52.                     tm.setLeaf(false);  
  53.                     tm.setChildren(children);  
  54.                 }else{  
  55.                     tm.setLeaf(true);  
  56.                     tm.setChildren(new ArrayList<TreeModel>(0));  
  57.                 }  
  58.                 lst.add(tm);  
  59.             }  
  60.         }  
  61.         return lst;  
  62.     }  
  63.          //省略getter,setter方法...   
  64. }  

 

 

PageModel.java，用于分页的模型：

 

view plaincopy to clipboardprint?
  1. public class PageModel {  
  2.     private int total;  
  3.     private List lst;  
  4.          ...  
  5. }  

 

 

 

下面添加工程对Extjs3.2的支持：

解压ext-3.2.0.zip到某个路径，复制adapter、pkgs、resource文件夹、ext-3.2.0/src/locale/ext-lang-zh_CN.js和ext-3.2.0/ext-all.js到WebRoot/js下面，这样就完成了对Extjs功能的支持。

 

接下来完成从数据库获取部门信息和人员信息并转换成JSON格式：

deptProcessor.jsp:

 

view plaincopy to clipboardprint?
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <%@ page import="com.model.TreeModel" %>  
  3. <%@ page import="com.model.DeptModel" %>  
  4. <%@ page import="java.sql.*,java.util.*" %>  
  5.     <%  
  6.         Class.forName("com.mysql.jdbc.Driver");  
  7.         java.sql.Connection conn = java.sql.DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
  8.         PreparedStatement pstmt = conn.prepareStatement("select * from dept");  
  9.         ResultSet rs = pstmt.executeQuery();  
  10.         List<DeptModel> models = new ArrayList<DeptModel>();  
  11.         while(rs.next()){  
  12.             DeptModel model = new DeptModel();  
  13.             model.setDeptno(rs.getInt("deptno"));  
  14.             model.setDeptname(rs.getString("deptname"));  
  15.             model.setParentno(rs.getInt("parentno"));  
  16.             models.add(model);  
  17.         }  
  18.         String jsonTreeModelString = new TreeModel().getJsonTreeModelString(models);  
  19.         out.println(jsonTreeModelString);  
  20.     %>  

 

 

 

empProcessor.jsp:

 

view plaincopy to clipboardprint?
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <%@ page import="com.model.EmpModel" %>  
  3. <%@ page import="com.model.PageModel" %>  
  4. <%@ page import="net.sf.json.JSONObject" %>  
  5. <%@ page import="java.sql.*,java.util.*" %>  
  6.     <%  
  7.         Integer deptno = -1;  
  8.         Integer start = 0;  
  9.         Integer limit = 0;  
  10.         if(request.getParameter("deptno") != null){  
  11.             deptno = Integer.parseInt(request.getParameter("deptno").toString());  
  12.         }  
  13.         if(request.getParameter("start") != null){  
  14.             start = Integer.parseInt(request.getParameter("start").toString());  
  15.         }  
  16.         if(request.getParameter("limit") != null){  
  17.             limit = Integer.parseInt(request.getParameter("limit").toString());  
  18.         }  
  19.         Class.forName("com.mysql.jdbc.Driver");  
  20.         java.sql.Connection conn = java.sql.DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
  21.         PreparedStatement pstmt = conn.prepareStatement("select * from emp where deptno=? limit ? ,?");  
  22.         pstmt.setInt(1,deptno);  
  23.         pstmt.setInt(2,start);  
  24.         pstmt.setInt(3,limit);  
  25.         ResultSet rs = pstmt.executeQuery();  
  26.         List<EmpModel> models = new ArrayList<EmpModel>();  
  27.         while(rs.next()){  
  28.             EmpModel model = new EmpModel();  
  29.             model.setEmpno(rs.getInt("empno"));  
  30.             model.setEmpname(rs.getString("empname"));  
  31.             model.setGender(rs.getInt("gender")==1?"男":"女");  
  32.             model.setJob(rs.getString("job"));  
  33.             model.setDeptno(rs.getInt("deptno"));  
  34.             models.add(model);  
  35.         }  
  36.         pstmt = conn.prepareStatement("select count(*) from emp where deptno=?");  
  37.         pstmt.setInt(1,deptno);  
  38.         rs = pstmt.executeQuery();  
  39.         int total = 0;  
  40.         if(rs.next()){  
  41.             total = rs.getInt(1);  
  42.         }  
  43.         PageModel pageModel = new PageModel();  
  44.         pageModel.setTotal(total);  
  45.         pageModel.setLst(models);  
  46.         String jsonEmpModelString = JSONObject.fromObject(pageModel).toString();  
  47.         out.println(jsonEmpModelString);  
  48.     %>  

 

 

 

最后列用Extjs提供的TreePanel和Window,GridPanel分别显示部门和人员信息:

tree.jsp:

 

view plaincopy to clipboardprint?
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.   <head>  
  5.     <title>Extjs Tree Demo</title>  
  6.     <meta http-equiv="pragma" content="no-cache">  
  7.     <meta http-equiv="cache-control" content="no-cache">  
  8.     <meta http-equiv="expires" content="0">      
  9.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  10.     <meta http-equiv="description" content="This is my page">  
  11.     <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" mce_href="js/extjs/resources/css/ext-all.css" />  
  12.     <mce:script src="js/extjs/adapter/ext/ext-base.js" mce_src="js/extjs/adapter/ext/ext-base.js"></mce:script>  
  13.     <mce:script src="js/extjs/ext-all.js" mce_src="js/extjs/ext-all.js"></mce:script>  
  14.     <mce:script src="js/extjs/ext-lang-zh_CN.js" mce_src="js/extjs/ext-lang-zh_CN.js"></mce:script>  
  15.     <mce:script type="text/javascript"><!--  
  16.         Ext.onReady(function(){  
  17.             //生成部门树结构   
  18.             var treeLoader = new Ext.tree.TreeLoader({  
  19.                 dataUrl:"deptProcessor.jsp"  
  20.             });       
  21.             var rootNode = new Ext.tree.AsyncTreeNode({  
  22.                 text: '所有部门'  
  23.             });  
  24.             var tree = new Ext.tree.TreePanel({  
  25.                 renderTo:'treecontainer',  
  26.                 loader: treeLoader,  
  27.                 root: rootNode,  
  28.                 width:200,  
  29.                 height:300,  
  30.                 listeners:{  
  31.                     click:showEmps  
  32.                 }  
  33.             });  
  34.             tree.expandAll();  
  35.         });  
  36.         //点击部门节点后的事件处理   
  37.         function showEmps(n){  
  38.             var deptno = n.attributes.id;  
  39.             var deptname = n.attributes.text;  
  40.             var win = new Ext.Window({  
  41.                 title:deptname,  
  42.                 width:500,  
  43.                 height:300  
  44.             });  
  45.               
  46.             var dataProxy = new Ext.data.HttpProxy({  
  47.                 url:"empProcessor.jsp?deptno="+deptno  
  48.             });  
  49.               
  50.             var reader = new Ext.data.JsonReader({totalProperty:"total",root:"lst"},[  
  51.                     "empno","empname","gender","job","deptno"  
  52.             ]);  
  53.               
  54.             var store = new Ext.data.Store({  
  55.                 proxy:dataProxy,  
  56.                 reader:reader  
  57.             });  
  58.               
  59.             store.load({params:{start:0,limit:5}});  
  60.               
  61.             var columnModel = new Ext.grid.ColumnModel([  
  62.                 {header:"编号",width:100,dataIndex:"empno"},  
  63.                 {header:"姓名",width:120,dataIndex:"empname"},  
  64.                 {header:"性别",width:100,dataIndex:"gender"},  
  65.                 {header:"职位",width:100,dataIndex:"job"}  
  66.             ]);  
  67.             //分页   
  68.             var pageBar = new Ext.PagingToolbar({  
  69.                 store:store,  
  70.                 pageSize:5,  
  71.                 displayInfo:true,  
  72.                 displayMsg:"当前为{0}-{1}条,共{2}条",  
  73.                 emptyMsg:"没有记录"  
  74.             });  
  75.               
  76.             var gridPanel = new Ext.grid.GridPanel({  
  77.                 width:480,  
  78.                 autoHeight:true,  
  79.                 cm:columnModel,  
  80.                 store:store,  
  81.                 bbar:pageBar  
  82.             });  
  83.             win.add(gridPanel);  
  84.               
  85.             win.show(Ext.getBody());  
  86.         }  
  87.       
  88. // --></mce:script>   
  89. </head>  
  90. <body style="padding:30px 20px" mce_style="padding:30px 20px">  
  91. <div id="treecontainer" style="height:300px; width:200px;"></div>  
  92. </body>  
  93. </html>     

 

 

 

在浏览器中输入 http://127.0.0.1:8080/Extjs/tree.jsp 测试，效果如下：

<!--StartFragment -->
哈哈，很简单吧。。。
分享到：
| Swfupload--很酷的文件上传工具
评论
发表评论

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

相关推荐

    轻松搞定Extjs

    - **跑跑题——JSON-LIB**: 介绍了JSON-LIB在处理异步数据传输中的作用。 - **分页工具栏**: 详细解释了如何使用Extjs提供的分页工具栏组件。 - **分页**: 展示了如何实现表格数据的分页显示。 #### GridPanel扩展 ...

    ssh2+extjs

    - 使用 ExtJS 的 GridPanel 或 FormPanel 来实现 CRUD 操作。 #### 四、开发流程与实践建议 1. **需求分析与设计** - 明确项目需求，确定功能模块划分。 - 设计数据库结构，确保数据模型合理。 - 规划前端页面...

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能.doc

    5. **ExtJS前端展示：** 利用ExtJS的GridPanel、FormPanel等组件，结合AJAX技术，实现数据的动态加载和更新。 #### 四、总结 通过上述技术栈的集成，可以构建出一个功能完善、易于扩展的企业级应用系统。其中，...

    ExtJs中文教程

    ### ExtJs中文教程知识点概览 #### 一、ExtJs简介 - **ExtJs**是一款基于JavaScript的开源前端框架，用于构建复杂的Web应用程序。 - 它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 #### 二、...

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