`
qiang106
  • 浏览: 387651 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext复合树

阅读更多
项目中要用一个复合树,对叶子节点需要能够进行复选,对于根或枝节点为了不需要复选框,也没去找其它办法,自己想了一个,也许不是很好,仅为给自己记一事吧,以后有时间再深入研究一下,看有没有更好的办法了。
总体思路是这样的,前台JS的代码跟平常的Ext树没有任何差别,差别在后台给前台数据的时候控制节点有没有复选框,控制方法就是作用类继续机制,叶子节点为子类型扩展普通节点,子类添加了一个属性checked,这样它就会有一个复选框了,设置为true即为选中状态。
Action方法:其中代码并不优美
public ActionForward setStamp(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response){ 
		try {
			final String parentID = request.getParameter("node").trim();
			IStampService stampService = getStampService();
			List<Stamp> subStamps = stampService.getByParentId(Long.valueOf(parentID));
			List<TreeNodeBean> ts = new ArrayList<TreeNodeBean>();
			boolean b = false;
			for(Stamp s:subStamps){
                             //判断是不是叶子节点
				b = stampService.isLeaf(s);
				TreeNodeBean t;
				if(b){
                               //是叶子节点就构造子类
					t = new ComplexCheckTreeNodeBean();
					boolean bb = eventStampService.isChecked(s.getId(), eventDetailId);
					((ComplexCheckTreeNodeBean)t).setChecked(bb);
				}else{
					t = new TreeNodeBean();
				}
//设置节点值
				t.setId(s.getId());
				t.setText(s.getStampName());
				t.setLeaf(b);
				ts.add(t);
				
			}
                   //用的是JSON-lib生成JSON数据
			JSONArray json = JSONArray.fromObject(ts);
			response.setBufferSize(1024*10);
			response.setContentType("text/json;charset=utf-8");
			response.getWriter().write(json.toString());
			response.flushBuffer();
			getLogger().debug(json.toString());
			return null;
		} catch (NumberFormatException e) {
			e.printStackTrace();
		} catch (ServiceException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}	
		return null;
	}

页面JS代码:

[/coExt.onReady(function(){
	Ext.SSL_SECURE_URL = "../ext/resources/images/default/s.gif";
	Ext.BLANK_IMAGE_URL = "../ext/resources/images/default/s.gif";
	tree = new Ext.tree.TreePanel({
	    el:"stamptree",
	    autoHeight:false,
        autoWidth:false,
        rootVisible:true,
        title:'标签管理',
		useArrows:true,
		autoScroll:true,
		animate:true,
		enableDD:true,
		containerScroll:true,
		border:false,
		loader:new Ext.tree.TreeLoader({
			dataUrl:"../stamp/stamp.do?method=setStamp“
		})
	});
	var root = new Ext.tree.AsyncTreeNode({
			id:1,
			text:"根",
			qtip:"根标签",
			allowDrag:false,
      		allowDrop:false
		});
	tree.setRootNode(root);
	tree.render();
	root.expand();
});

自己把代码一贴上来这样一看觉得代码还真乱,有待学习和进步。
分享到:
评论

相关推荐

    Ext用户扩展控件-----树形表格

    在ExtJS中,"树形表格"(Tree Grid)是一种结合了树视图和数据网格功能的复合控件,它允许用户同时查看数据的层次结构和表格形式,极大地提高了数据展示的灵活性和交互性。在本篇文章中,我们将深入探讨ExtJS中的树...

    ext 学习资料

    - Ext JS提供了大量的UI组件,如数据网格(datagrid)、选项卡面板(tabpanels)、树形控件(tree controls)等,极大地提升了开发效率。 3. **双向数据绑定:** - 双向数据绑定机制使得视图与模型之间的数据同步变得...

    Ext JS in Action.pdf

    - **树形控件(Trees)**:用于展示层次结构数据。 - **工具栏和菜单(Toolbars and Menus)**:提供导航和操作选项。 - **拖放功能(Drag and Drop with Widgets)**:支持用户通过拖放方式与UI元素进行交互。 ###...

    最全面的EXT教程(中文),不管是初学或实际项目,都是你的好帮手

    - **复合组件:** 由多个基础组件组合而成,如表格、树形菜单等。 ##### 2.2 数据管理 EXT内置了强大的数据管理机制,包括数据模型、数据存储和数据视图等。 - **数据模型(Model):** 定义数据结构,包括字段...

    可编辑TreeGrid

    在Ext JS中,TreeGrid是一个复合组件,它继承自Grid Panel,并且包含了TreePanel的功能。TreeGrid将树节点和表格行融合在一起,每个树节点都可以展开或折叠,显示其子节点,同时,每个节点还可以像表格单元格一样...

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    它是将传统的下拉框(ComboBox)和树形控件(Tree)结合起来的一种复合组件,用户可以从树形结构中选择某个节点,同时这个选择的动作会反映到下拉框上。这样的设计不仅节省空间,还能直观地展现层次关系。 从代码...

    Extjs4的TreeGrid例子

    TreeGrid是ExtJS提供的一种复合组件,它结合了树形视图和数据网格的功能,允许用户同时展示层次结构数据和表格数据。在"Extjs4的TreeGrid例子"这个主题中,我们将深入探讨TreeGrid的各种特性,以及如何在实际项目中...

    EXTJS 2.2docs CHM格式 帮助文件

    EXTJS 2.2包含了一系列组件和工具,如数据网格、表格、窗口、表单、树形视图、图表等,这些都在CHM文件中有详尽的解释。例如,数据网格(Data Grid)是EXTJS中的核心组件之一,用于显示大量数据并支持各种交互功能,...

    T7 Baseboard底板.pdf

    AMP"、"Audio-DSP"、"AUDIO"、"MIC"、"GPS"、"PCIE-3G/4G"、"CARD-KEY"、"EXT_DET"、"FM_ST7707"、"MCU"、"BT"、"CONNECT"等分别代表了底板上的通用串行总线接口、复合视频基色信号、无线通讯、音频放大器、数字信号...

    一步到位实现MySQL优化

    - 选择合适的索引类型,如B树、哈希索引等。 - 创建复合索引来减少查询时间。 - 定期分析和优化索引结构。 - **查询优化**: - 避免使用SELECT *,只查询所需字段。 - 使用JOIN代替子查询提高效率。 - 利用...

    MySQL 5.1中文手冊

    2.8.3. 从开发源码树安装 2.8.4. 处理MySQL编译问题 2.8.5. MIT-pthreads注意事项 2.8.6. 在Windows下从源码安装MySQL 2.8.7. 在Windows下编译MySQL客户端 2.9. 安装后的设置和测试 2.9.1. Windows下安装后的过程 ...

    mysql5.1中文手册

    从开发源码树安装 2.8.4. 处理MySQL编译问题 2.8.5. MIT-pthreads注意事项 2.8.6. 在Windows下从源码安装MySQL 2.8.7. 在Windows下编译MySQL客户端 2.9. 安装后的设置和测试 2.9.1. Windows下...

    MySQL 5.1参考手册 (中文版)

    2.8.3. 从开发源码树安装 2.8.4. 处理MySQL编译问题 2.8.5. MIT-pthreads注意事项 2.8.6. 在Windows下从源码安装MySQL 2.8.7. 在Windows下编译MySQL客户端 2.9. 安装后的设置和测试 2.9.1. Windows下安装后的过程 ...

    mysql官方中文参考手册

    2.8.3. 从开发源码树安装 2.8.4. 处理MySQL编译问题 2.8.5. MIT-pthreads注意事项 2.8.6. 在Windows下从源码安装MySQL 2.8.7. 在Windows下编译MySQL客户端 2.9. 安装后的设置和测试 2.9.1. Windows下安装后的过程 ...

    MYSQL中文手册

    2.8.3. 从开发源码树安装 2.8.4. 处理MySQL编译问题 2.8.5. MIT-pthreads注意事项 2.8.6. 在Windows下从源码安装MySQL 2.8.7. 在Windows下编译MySQL客户端 2.9. 安装后的设置和测试 2.9.1. Windows下安装后的...

    MySQL 5.1参考手册中文版

    2.8.3. 从开发源码树安装 2.8.4. 处理MySQL编译问题 2.8.5. MIT-pthreads注意事项 2.8.6. 在Windows下从源码安装MySQL 2.8.7. 在Windows下编译MySQL客户端 2.9. 安装后的设置和测试 2.9.1. Windows下安装后的...

    MySQL 5.1参考手册

    2.8.3. 从开发源码树安装 2.8.4. 处理MySQL编译问题 2.8.5. MIT-pthreads注意事项 2.8.6. 在Windows下从源码安装MySQL 2.8.7. 在Windows下编译MySQL客户端 2.9. 安装后的设置和测试 2.9.1. Windows下安装后的过程 ...

Global site tag (gtag.js) - Google Analytics