ExtJS4 TreePanel 加载数据 J2EE
2012-12-23 17:39
471 查看
ExtJS4 TreePanel 加载数据J2EE
ExtJS4 树形加载测试:
1. 客户端JS 代码
3.返回数据格式
4. UI
ExtJS4 树形加载测试:
1. 客户端JS 代码
Ext.require([ 'Ext.tree.*', 'Ext.data.*' ]); Ext.onReady(function() { var treeStore = Ext.create('Ext.data.TreeStore', { autoLoad : true, fields : ['id', 'text', 'cls', 'leaf', 'link', 'children'], proxy : { type : 'ajax', url : 'tree.do', reader: { type : 'json' } }, root : { id : '0', text : 'China', expanded : true } } ); var tree = Ext.create('Ext.tree.Panel', { renderTo : Ext.getBody(), title : 'TreeNav', height: 350, width: 400, hideHeaders: true, rootVisible: true, viewConfig: { plugins: [{ ptype: 'treeviewdragdrop' }] }, collapsible: true, singleExpand: true, useArrows: true, store : treeStore, listeners: { itemclick : function(view, record, item, index, e) { var leaf = record.get('leaf'); if(leaf) { window.open(record.get('link'), '_blank'); } else { var expanded = record.get('expanded'); if(expanded) { view.collapse(record); } else { view.expand(record); } } } } }); });2. 服务端Java实现
public static List<TreeBean> getChildren(String parentId) { List<TreeBean> list = new ArrayList<TreeBean>(); if(parentId.equals("0")) { TreeBean bean = new TreeBean(); bean.setId(1); bean.setText("北京"); bean.setCls("file"); bean.setLeaf(false); bean.setLink("www.google.com"); bean.setChildren(getRegions()); list.add(bean); bean = new TreeBean(); bean.setId(2); bean.setText("天津"); bean.setCls("file"); bean.setLeaf(false); bean.setLink("www.baidu.com"); list.add(bean); } return list; } public static List<TreeBean> getRegions() { List<TreeBean> list = new ArrayList<TreeBean>(); TreeBean bean = new TreeBean(18, "东城区", "file", "http://www.google.com", true); list.add(bean); bean = new TreeBean(19, "西城区", "file", "http://www.google.com", true); list.add(bean); return list; }
// TODO Auto-generated method stub String parentId = request.getParameter("id"); //String text = request.getParameter("text"); List<TreeBean> list = TreeNav.getChildren(parentId); /*Tree tree = new Tree(); tree.setParentId(parentId); tree.setChildren(list);*/ JSONArray arr = JSONArray.fromObject(list); response.setCharacterEncoding("utf-8"); response.getWriter().println(arr.toString());
3.返回数据格式
[{"children":[{"children":[],"cls":"file","id":18,"leaf":true,"link":"http://www.google.com","text":"东城区"},{"children":[],"cls":"file","id":19,"leaf":true,"link":"http://www.google.com","text":"西城区"}],"cls":"file","id":1,"leaf":false,"link":"www.google.com","text":"北京"},{"children":[],"cls":"file","id":2,"leaf":false,"link":"www.baidu.com","text":"天津"}]
4. UI
相关文章推荐
- [Ext.Net]TreePanel 异步加载数据
- [Ext.Net]TreePanel 异步加载数据
- extjs TreePanel 加载数据后默认选中第一个孩子并展开子级
- ExtJs TreePanel 不能加载ashx数据的解决办法
- ext TreePanel 一次递归加载数据及异步加载数据(点子节点加载数据)
- Extjs4 treePanel异步加载菜单(后台从数据库读取)
- treepanel动态加载数据实现代码
- ExtJs4问题笔记(一) 为treePanel 添加加载动画
- Extjs6 treepanel store无法加载请求后台URL数据bug
- extjs4.0 treepanel节点的选中、展开! 数据的重新加载! checked树
- asp.net mvc + ExtJs 实现无限级TreePanel 加载、添加、编辑、删除
- 解决Ext中的Tabpanel中items内的各个tab的数据延迟加载问题
- DevExpress TreeList 调优_绑定数据源方式, 放弃原来的AppendNode加载数据的方式
- extjs4 tree自动加载问题
- 关于Ext.grid.Panel显示远程数据无法加载问题的解决
- Ext comboBoxTree (完整的数据加载)--下拉列表里边是树结构
- extjs4 treepanel、 树、节点的操作
- Flex2 Tree从XML文件中加载数据
- Coolite TreePanel的数据绑定操作