项目中要用一个复合树,对叶子节点需要能够进行复选,对于根或枝节点为了不需要复选框,也没去找其它办法,自己想了一个,也许不是很好,仅为给自己记一事吧,以后有时间再深入研究一下,看有没有更好的办法了。
总体思路是这样的,前台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();
});
自己把代码一贴上来这样一看觉得代码还真乱,有待学习和进步。
分享到:
相关推荐
在ExtJS中,"树形表格"(Tree Grid)是一种结合了树视图和数据网格功能的复合控件,它允许用户同时查看数据的层次结构和表格形式,极大地提高了数据展示的灵活性和交互性。在本篇文章中,我们将深入探讨ExtJS中的树...
- Ext JS提供了大量的UI组件,如数据网格(datagrid)、选项卡面板(tabpanels)、树形控件(tree controls)等,极大地提升了开发效率。 3. **双向数据绑定:** - 双向数据绑定机制使得视图与模型之间的数据同步变得...
- **树形控件(Trees)**:用于展示层次结构数据。 - **工具栏和菜单(Toolbars and Menus)**:提供导航和操作选项。 - **拖放功能(Drag and Drop with Widgets)**:支持用户通过拖放方式与UI元素进行交互。 ###...
- **复合组件:** 由多个基础组件组合而成,如表格、树形菜单等。 ##### 2.2 数据管理 EXT内置了强大的数据管理机制,包括数据模型、数据存储和数据视图等。 - **数据模型(Model):** 定义数据结构,包括字段...
### ExtJS核心API详解 #### 1. Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。... - `Ext.data.Tree.load(root, callback, scope)`: 加载树数据。 - `Ext.data.Tree.add(node)`:...
在Ext JS中,TreeGrid是一个复合组件,它继承自Grid Panel,并且包含了TreePanel的功能。TreeGrid将树节点和表格行融合在一起,每个树节点都可以展开或折叠,显示其子节点,同时,每个节点还可以像表格单元格一样...
它是将传统的下拉框(ComboBox)和树形控件(Tree)结合起来的一种复合组件,用户可以从树形结构中选择某个节点,同时这个选择的动作会反映到下拉框上。这样的设计不仅节省空间,还能直观地展现层次关系。 从代码...
TreeGrid是ExtJS提供的一种复合组件,它结合了树形视图和数据网格的功能,允许用户同时展示层次结构数据和表格数据。在"Extjs4的TreeGrid例子"这个主题中,我们将深入探讨TreeGrid的各种特性,以及如何在实际项目中...
EXTJS 2.2包含了一系列组件和工具,如数据网格、表格、窗口、表单、树形视图、图表等,这些都在CHM文件中有详尽的解释。例如,数据网格(Data Grid)是EXTJS中的核心组件之一,用于显示大量数据并支持各种交互功能,...
AMP"、"Audio-DSP"、"AUDIO"、"MIC"、"GPS"、"PCIE-3G/4G"、"CARD-KEY"、"EXT_DET"、"FM_ST7707"、"MCU"、"BT"、"CONNECT"等分别代表了底板上的通用串行总线接口、复合视频基色信号、无线通讯、音频放大器、数字信号...
- 选择合适的索引类型,如B树、哈希索引等。 - 创建复合索引来减少查询时间。 - 定期分析和优化索引结构。 - **查询优化**: - 避免使用SELECT *,只查询所需字段。 - 使用JOIN代替子查询提高效率。 - 利用...
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下安装后的过程 ...
从开发源码树安装 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下...
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下安装后的过程 ...
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下安装后的过程 ...
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下安装后的...
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下安装后的...
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下安装后的过程 ...