Extjs的ColumnTree的简单使用 -

357029540

浏览: 739217 次
性别:
来自: 重庆

最近访客更多访客>>

韩毅Evan

heroqt

jis117

divver

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Extjs的ColumnTree的简单使用

博客分类：

JAVA
EXTJS

extjs java

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

}

}

}

效果如图所示：

分享到：

Extjs动态生成grid | Extjs中的树在页面上的简单过滤

2015-04-22 21:25
浏览 1315
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs的ColumnTree的简单使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs的ColumnTree的简单使用

评论

发表评论

相关推荐

如何保证在Java多线程中的原子性操作？

Java内存模型简单介绍

java中线程挂起的几种方式

自定义线程池简单介绍

实现自己的spring boot starter

使用POI实现合并行的导入

Spring IOC设计原理解析

SpringBoot集成自定义HandlerMethodArgumentResolver参数初始值解析

关于spring cloud config加密EncryptionTooWeakException异常说明

gradle使用mybatis-generator生成user表相关文件只生成mysql..user的原因说明

SpringBoot+Activiti的serviceTask注入异常问题

16进制与字符串的互转及转换为byte数组

JVM学习总结

利用JavaFX创建一个可以订阅发布的MQTT客户端桌面程序

java8新特性time类相关介绍

java动态添加外部jar包到classpath

java 10进制转16进制带ox格式输出

SpringBoot+thymeleaf简单实现登陆注册及记账功能

Java 8的新特性—终极版

对\\uxx转换为unicode编码的\uxx

最近访客更多访客>>