您的位置：首页 > Web前端 > JavaScript

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

2010-12-30 13:36 369 查看

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

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

EmpModel.java:

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

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

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

<%@ 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<DeptModel> models = new ArrayList<DeptModel>();
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"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Extjs Tree Demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" mce_href="js/extjs/resources/css/ext-all.css" />
<mce:script src="js/extjs/adapter/ext/ext-base.js" mce_src="js/extjs/adapter/ext/ext-base.js"></mce:script>
<mce:script src="js/extjs/ext-all.js" mce_src="js/extjs/ext-all.js"></mce:script>
<mce:script src="js/extjs/ext-lang-zh_CN.js" mce_src="js/extjs/ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
//生成部门树结构
var treeLoader = new Ext.tree.TreeLoader({
dataUrl:"deptProcessor.jsp"
});
var rootNode = new Ext.tree.AsyncTreeNode({
text: '所有部门'
});
var tree = new Ext.tree.TreePanel({
renderTo:'treecontainer',
loader: treeLoader,
root: rootNode,
width:200,
height:300,
listeners:{
click:showEmps
}
});
tree.expandAll();
});
//点击部门节点后的事件处理
function showEmps(n){
var deptno = n.attributes.id;
var deptname = n.attributes.text;
var win = new Ext.Window({
title:deptname,
width:500,
height:300
});

var dataProxy = new Ext.data.HttpProxy({
url:"empProcessor.jsp?deptno="+deptno
});

var reader = new Ext.data.JsonReader({totalProperty:"total",root:"lst"},[
"empno","empname","gender","job","deptno"
]);

var store = new Ext.data.Store({
proxy:dataProxy,
reader:reader
});

store.load({params:{start:0,limit:5}});

var columnModel = new Ext.grid.ColumnModel([
{header:"编号",width:100,dataIndex:"empno"},
{header:"姓名",width:120,dataIndex:"empname"},
{header:"性别",width:100,dataIndex:"gender"},
{header:"职位",width:100,dataIndex:"job"}
]);
//分页
var pageBar = new Ext.PagingToolbar({
store:store,
pageSize:5,
displayInfo:true,
displayMsg:"当前为{0}-{1}条,共{2}条",
emptyMsg:"没有记录"
});

var gridPanel = new Ext.grid.GridPanel({
width:480,
autoHeight:true,
cm:columnModel,
store:store,
bbar:pageBar
});
win.add(gridPanel);

win.show(Ext.getBody());
}

// --></mce:script>
</head>
<body style="padding:30px 20px" mce_style="padding:30px 20px">
<div id="treecontainer" style="height:300px; width:200px;"></div>
</body>
</html>

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

哈哈，很简单吧。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： extjs json insert integer string import

相关文章推荐

新的分享

章节导航