`
357029540
  • 浏览: 742819 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

Extjs的ColumnTree的简单使用

extjsjava 
阅读更多
在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中的树在页面上的简单过滤
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics