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

阅读更多

最近项目中要用到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数据库脚本：

 

DROP TABLE IF EXISTS `dept`;
CREATE TABLE `dept` (
   `deptno` int(11) NOT NULL AUTO_INCREMENT,
   `deptname` varchar(255) NOT NULL DEFAULT '',
   `parentno` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`deptno`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
LOCK TABLES `dept` WRITE;
 /*!40000 ALTER TABLE `dept` DISABLE KEYS */;
 INSERT INTO `dept` VALUES (1,'管理部',0);
 INSERT INTO `dept` VALUES (2,'销售部',0);
 INSERT INTO `dept` VALUES (3,'人力资源部',0);
 INSERT INTO `dept` VALUES (4,'开发部',0);
 INSERT INTO `dept` VALUES (5,'后勤部',0);
 INSERT INTO `dept` VALUES (6,'软件开发部',4);
 INSERT INTO `dept` VALUES (7,'增值开发部',4);
 INSERT INTO `dept` VALUES (8,'增值销售部',2);
 INSERT INTO `dept` VALUES (9,'产品销售部',2);
 INSERT INTO `dept` VALUES (10,'人妖部',3);
 /*!40000 ALTER TABLE `dept` ENABLE KEYS */;
UNLOCK TABLES;
DROP TABLE IF EXISTS `emp`;
CREATE TABLE `emp` (
   `empno` int(11) NOT NULL AUTO_INCREMENT,
   `empname` varchar(255) NOT NULL DEFAULT '',
   `gender` int(11) NOT NULL DEFAULT '0',
   `job` varchar(255) NOT NULL DEFAULT '',
   `deptno` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`empno`),
  KEY `fk_deptno` (`deptno`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
LOCK TABLES `emp` WRITE;
 INSERT INTO `emp` VALUES (1,'陈一',1,'staff boss',1);
 INSERT INTO `emp` VALUES (2,'黄二',1,'technical boss',1);
 INSERT INTO `emp` VALUES (3,'张三',0,'human resouce',3);
 INSERT INTO `emp` VALUES (4,'李四',1,'developer leader',6);
 INSERT INTO `emp` VALUES (5,'王五',1,'clerk',10);
 INSERT INTO `emp` VALUES (6,'赵六',1,'clerk',6);
 INSERT INTO `emp` VALUES (7,'钱七',1,'executor',6);
 INSERT INTO `emp` VALUES (8,'孙八',1,'super man',6);
 INSERT INTO `emp` VALUES (9,'方九',0,'oh, god',6);
 INSERT INTO `emp` VALUES (10,'无名氏',0,'无语',6);
UNLOCK TABLES;
ALTER TABLE `emp`
ADD CONSTRAINT `fk_deptno` FOREIGN KEY (`deptno`) REFERENCES `dept` (`deptno`);

 

 

 

下面建立web工程：

分别新建DeptModel,EmpModel,TreeModel和PageModel

DeptModel.java:

 

public class DeptModel {
     private int deptno;
     private String deptname;
     private int parentno;
         ...
}

 

 

EmpModel.java:

 

public class EmpModel {
     private Integer empno;
     private String empname;
     private String gender;
     private String job;
     private Integer deptno;
         ...
}

 

 

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

 

public class TreeModel {
     private int id;
     private String text;
     private boolean leaf;
     private List children = new ArrayList(0);
     public TreeModel(){

    }
     /**
     * 根据部门列表获取形如 [{id:"",text:"",leaf:,children:[]},{...},...]的JSON字符串
     * @param models 部门列表List
     * @return JSON格式的字符串，用于生成ext树
     */
     public String getJsonTreeModelString(List models){
         List lst = new ArrayList(0);
         for(DeptModel dm : models){
             if(dm.getParentno()==0){
                 TreeModel root = new TreeModel();
                root.setId(dm.getDeptno());
                root.setText(dm.getDeptname());
                 List children = getChildren(models,root);  //递归获取子集
                 if(children.size()>0){
                     root.setLeaf(false);
                    root.setChildren(children);
                 }else{
                     root.setLeaf(true);
                     root.setChildren(new ArrayList(0));
                }
                lst.add(root);
            }
        }
         JsonConfig config = new JsonConfig();
         config.setExcludes(new String[]{"models"});
        config.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
         return JSONArray.fromObject(lst,config).toString();
    }
     /**
     * 递归获取节点的子集的方法
     * @param models 部门列表
     * @param parentModel 根节点，即deptno=0的根节点部门
     * @return List 树模型列表
     */
     public List getChildren(List models,TreeModel parentModel){
         List lst = new ArrayList(0);
         for(DeptModel dm : models){
             if(parentModel.getId() == dm.getParentno()){
                 TreeModel tm = new TreeModel();
                tm.setId(dm.getDeptno());
                tm.setText(dm.getDeptname());
                List children = getChildren(models,tm);
                 if(children.size()>0){
                     tm.setLeaf(false);
                    tm.setChildren(children);
                 }else{
                     tm.setLeaf(true);
                     tm.setChildren(new ArrayList(0));
                }
                lst.add(tm);
            }
        }
         return lst;
    }
          //省略getter,setter方法...
}

 

 

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

 

public class PageModel {
     private int total;
     private List lst;
         ...
}

 

 

 

下面添加工程对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:

 

<%@ page language="java" pageEncoding="UTF-8"%>
 <%@ page import="com.model.TreeModel" %>
 <%@ page import="com.model.DeptModel" %>
 <%@ page import="java.sql.*,java.util.*" %>
    <%
         Class.forName("com.mysql.jdbc.Driver");
         java.sql.Connection conn = java.sql.DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
         PreparedStatement pstmt = conn.prepareStatement("select * from dept");
        ResultSet rs = pstmt.executeQuery();
         List models = new ArrayList();
         while(rs.next()){
             DeptModel model = new DeptModel();
             model.setDeptno(rs.getInt("deptno"));
             model.setDeptname(rs.getString("deptname"));
             model.setParentno(rs.getInt("parentno"));
            models.add(model);
        }
         String jsonTreeModelString = new TreeModel().getJsonTreeModelString(models);
        out.println(jsonTreeModelString);
    %>

 

 

 

empProcessor.jsp:

 

<%@ page language="java" pageEncoding="UTF-8"%>
 <%@ page import="com.model.EmpModel" %>
 <%@ page import="com.model.PageModel" %>
 <%@ page import="net.sf.json.JSONObject" %>
 <%@ page import="java.sql.*,java.util.*" %>
    <%
         Integer deptno = -1;
         Integer start = 0;
         Integer limit = 0;
         if(request.getParameter("deptno") != null){
             deptno = Integer.parseInt(request.getParameter("deptno").toString());
        }
         if(request.getParameter("start") != null){
             start = Integer.parseInt(request.getParameter("start").toString());
        }
         if(request.getParameter("limit") != null){
             limit = Integer.parseInt(request.getParameter("limit").toString());
        }
         Class.forName("com.mysql.jdbc.Driver");
         java.sql.Connection conn = java.sql.DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
         PreparedStatement pstmt = conn.prepareStatement("select * from emp where deptno=? limit ? ,?");
         pstmt.setInt(1,deptno);
         pstmt.setInt(2,start);
         pstmt.setInt(3,limit);
        ResultSet rs = pstmt.executeQuery();
         List models = new ArrayList();
         while(rs.next()){
             EmpModel model = new EmpModel();
             model.setEmpno(rs.getInt("empno"));
             model.setEmpname(rs.getString("empname"));
             model.setGender(rs.getInt("gender")==1?"男":"女");
             model.setJob(rs.getString("job"));
             model.setDeptno(rs.getInt("deptno"));
            models.add(model);
        }
         pstmt = conn.prepareStatement("select count(*) from emp where deptno=?");
         pstmt.setInt(1,deptno);
        rs = pstmt.executeQuery();
         int total = 0;
         if(rs.next()){
             total = rs.getInt(1);
        }
         PageModel pageModel = new PageModel();
        pageModel.setTotal(total);
        pageModel.setLst(models);
        String jsonEmpModelString = JSONObject.fromObject(pageModel).toString();
        out.println(jsonEmpModelString);
    %>

 

 

 

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

tree.jsp:

 

<%@ page language="java" pageEncoding="UTF-8"%>
 "-//W3C//DTD HTML 4.01 Transitional//EN">


    Extjs Tree Demo
     "pragma" content="no-cache">
     "cache-control" content="no-cache">
     "expires" content="0">
     "keywords" content="keyword1,keyword2,keyword3">
     "description" content="This is my page">
     "stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" mce_href="js/extjs/resources/css/ext-all.css" />
     "js/extjs/adapter/ext/ext-base.js" mce_src="js/extjs/adapter/ext/ext-base.js">
     "js/extjs/ext-all.js" mce_src="js/extjs/ext-all.js">
     "js/extjs/ext-lang-zh_CN.js" mce_src="js/extjs/ext-lang-zh_CN.js">
     "text/javascript">

 "padding:30px 20px" mce_style="padding:30px 20px">
 "treecontainer" style="height:300px; width:200px;">

  

  

     

 

 

 

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

哈哈，很简单吧。。。