Extjs的ColumnTree的简单使用

玉&心

于 2019-09-05 09:09:12 发布

阅读量279

点赞数

分类专栏： JAVA EXTJS 文章标签： extjs java

本文链接：https://blog.csdn.net/XinhuaShuDiao/article/details/84714081

版权

JAVA 同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

EXTJS

7 篇文章 0 订阅

订阅专栏

在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();

}

}

}

效果如图所示：[img]http://c.hiphotos.bdimg.com/album/pic/item/562c11dfa9ec8a1321048579f603918fa0ecc009.jpg[/img]