Extjs的ColumnTree的简单使用
在Extjs中我们可以通过像表格一样展示树形结构。其实现方式是主要通过扩展Ext.tree.TreePanel和Ext.tree.TreeNodeUI来实现的。因为目前使用的是Ext3.2，所以我们需要到Ext的文件夹的example里面去的ux目录下把ColumnNodeUI.js和ColumnNodeUI.css找出来放到自己建立的相应目录里。后台使用了fastjson-1.1.15.jar的jar包生成json对象.
jsp文件：
<html>
<head>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/tree2.js"></script>
<script type="text/javascript" src="./ext/ux/ColumnNodeUI.js"></script>
<link rel="stylesheet" type="text/css" href="./ext/ux/ColumnNodeUI.css">
</head>
<body>
<div id="container">
<div id="tree1">
</div>
</div>
</body>
</html>
js文件:
Ext.onReady(function(){
var tree = new Ext.ux.tree.ColumnTree({
renderTo:'tree1',
width: 550,
height: 300,
autoScroll:true,
rootVisible:false,
title:'中国军区',
columns:[{
header:'军区',
width:150,
dataIndex:'military'
},{
header:'战斗力',
autoWidth:true,
dataIndex:'fighting'
}],
loader:new Ext.tree.TreeLoader({
dataUrl:'function_columnTreeTest.action',
uiProviders:{
'cols':Ext.tree.ColumnNodeUI
}
}),
root:new Ext.tree.AsyncTreeNode({
text:'中国军区'
})
});
tree.expandAll();
});
structs.xml配置文件:
<action name="function_*" class="com.test.action.FunctionListAction" method="{1}"></action>
java类文件:
bo类
public class TreeBo {
private int id;//节点id
private String text;//节点显示名称
private String cls;//节点图标
private Boolean leaf;//是否叶子节点
private String qtip;//提示信息
private String href;
private List<TreeBo> children;//下级节点
private String military;//军区
private String fighting;//战斗力
private String uiProvider;
......//省略了getter/setter方法
}
action类
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSONObject;
import com.test.bo.TreeBo;
public class FunctionListAction {
private List<TreeBo> treeList;
public void columnTreeTest(){
treeList = new ArrayList<TreeBo>();
TreeBo cdAllMilitary = new TreeBo();
cdAllMilitary.setMilitary("成都军区");
cdAllMilitary.setFighting("500");
cdAllMilitary.setLeaf(false);
cdAllMilitary.setUiProvider("cols");
cdAllMilitary.setCls("folder");
cdAllMilitary.setId(1);
treeList.add(cdAllMilitary);
List<TreeBo> cdMilitary = new ArrayList<TreeBo>();
cdAllMilitary.setChildren(cdMilitary);
TreeBo cq = new TreeBo();
cq.setMilitary("重庆军区");
cq.setFighting("150");
cq.setCls("folder");
cq.setLeaf(true);
cq.setUiProvider("cols");
cq.setId(11);
cdMilitary.add(cq);
TreeBo km = new TreeBo();
km.setMilitary("昆明军区");
km.setFighting("140");
km.setCls("folder");
km.setLeaf(true);
km.setUiProvider("cols");
km.setId(12);
cdMilitary.add(km);
TreeBo bjAllMilitary = new TreeBo();
bjAllMilitary.setMilitary("北京军区");
bjAllMilitary.setFighting("600");
bjAllMilitary.setCls("folder");
bjAllMilitary.setLeaf(false);
bjAllMilitary.setUiProvider("cols");
bjAllMilitary.setId(2);
treeList.add(bjAllMilitary);
List<TreeBo> bjMilitary = new ArrayList<TreeBo>();
bjAllMilitary.setChildren(bjMilitary);
TreeBo bj = new TreeBo();
bj.setMilitary("北京军区");
bj.setFighting("200");
bj.setCls("folder");
bj.setLeaf(true);
bj.setUiProvider("cols");
bj.setId(21);
bjMilitary.add(bj);
TreeBo tj = new TreeBo();
tj.setMilitary("天津军区");
tj.setFighting("180");
tj.setCls("folder");
tj.setLeaf(true);
tj.setUiProvider("cols");
tj.setId(22);
bjMilitary.add(tj);
treeTest = JSONObject.toJSON(treeList).toString();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter writer = response.getWriter();
writer.print(JSONObject.toJSON(treeList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
}
效果如图所示：
jsp文件：
<html>
<head>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/tree2.js"></script>
<script type="text/javascript" src="./ext/ux/ColumnNodeUI.js"></script>
<link rel="stylesheet" type="text/css" href="./ext/ux/ColumnNodeUI.css">
</head>
<body>
<div id="container">
<div id="tree1">
</div>
</div>
</body>
</html>
js文件:
Ext.onReady(function(){
var tree = new Ext.ux.tree.ColumnTree({
renderTo:'tree1',
width: 550,
height: 300,
autoScroll:true,
rootVisible:false,
title:'中国军区',
columns:[{
header:'军区',
width:150,
dataIndex:'military'
},{
header:'战斗力',
autoWidth:true,
dataIndex:'fighting'
}],
loader:new Ext.tree.TreeLoader({
dataUrl:'function_columnTreeTest.action',
uiProviders:{
'cols':Ext.tree.ColumnNodeUI
}
}),
root:new Ext.tree.AsyncTreeNode({
text:'中国军区'
})
});
tree.expandAll();
});
structs.xml配置文件:
<action name="function_*" class="com.test.action.FunctionListAction" method="{1}"></action>
java类文件:
bo类
public class TreeBo {
private int id;//节点id
private String text;//节点显示名称
private String cls;//节点图标
private Boolean leaf;//是否叶子节点
private String qtip;//提示信息
private String href;
private List<TreeBo> children;//下级节点
private String military;//军区
private String fighting;//战斗力
private String uiProvider;
......//省略了getter/setter方法
}
action类
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSONObject;
import com.test.bo.TreeBo;
public class FunctionListAction {
private List<TreeBo> treeList;
public void columnTreeTest(){
treeList = new ArrayList<TreeBo>();
TreeBo cdAllMilitary = new TreeBo();
cdAllMilitary.setMilitary("成都军区");
cdAllMilitary.setFighting("500");
cdAllMilitary.setLeaf(false);
cdAllMilitary.setUiProvider("cols");
cdAllMilitary.setCls("folder");
cdAllMilitary.setId(1);
treeList.add(cdAllMilitary);
List<TreeBo> cdMilitary = new ArrayList<TreeBo>();
cdAllMilitary.setChildren(cdMilitary);
TreeBo cq = new TreeBo();
cq.setMilitary("重庆军区");
cq.setFighting("150");
cq.setCls("folder");
cq.setLeaf(true);
cq.setUiProvider("cols");
cq.setId(11);
cdMilitary.add(cq);
TreeBo km = new TreeBo();
km.setMilitary("昆明军区");
km.setFighting("140");
km.setCls("folder");
km.setLeaf(true);
km.setUiProvider("cols");
km.setId(12);
cdMilitary.add(km);
TreeBo bjAllMilitary = new TreeBo();
bjAllMilitary.setMilitary("北京军区");
bjAllMilitary.setFighting("600");
bjAllMilitary.setCls("folder");
bjAllMilitary.setLeaf(false);
bjAllMilitary.setUiProvider("cols");
bjAllMilitary.setId(2);
treeList.add(bjAllMilitary);
List<TreeBo> bjMilitary = new ArrayList<TreeBo>();
bjAllMilitary.setChildren(bjMilitary);
TreeBo bj = new TreeBo();
bj.setMilitary("北京军区");
bj.setFighting("200");
bj.setCls("folder");
bj.setLeaf(true);
bj.setUiProvider("cols");
bj.setId(21);
bjMilitary.add(bj);
TreeBo tj = new TreeBo();
tj.setMilitary("天津军区");
tj.setFighting("180");
tj.setCls("folder");
tj.setLeaf(true);
tj.setUiProvider("cols");
tj.setId(22);
bjMilitary.add(tj);
treeTest = JSONObject.toJSON(treeList).toString();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter writer = response.getWriter();
writer.print(JSONObject.toJSON(treeList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
}
效果如图所示：