当前位置： 代码迷 >> JavaScript >> Extjs3.2+Json lib动态树与GridPanel容易展现
  详细解决方案

Extjs3.2+Json lib动态树与GridPanel容易展现

热度：769   发布时间：2012-11-23 00:03:43.0
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数据库脚本：

?

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 -->
哈哈，很简单吧。。。
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.