EXTJS 动态树 JAVA JSON 来组织数据
2011-09-22 12:19
330 查看
如果使用EXTJS 则在页面中必须将EXTJS引入到页面中来,引入部分此处略去了。
EXTJS 动态树主体 页面部分
Ext.onReady(function() { var Tree = Ext.tree; var tree = new Tree.TreePanel( { el : 'left_tree',//目标div容器 autoScroll : true, animate : true, enableDD : true, containerScroll : true, rootVisible:false, loader : new Tree.TreeLoader( { dataUrl : '<%=path%>/opFactionNew.do?flag=findByParameter'// 访问后台的URL }) }); var root = new Tree.AsyncTreeNode( { text : '操作菜单', draggable : false, id : '00' // 此值是action:中的 上面的URL默认会传 node 参数值为ID的值,首次访问根据此值拿到顶级节点,展开时根据传入的node值得到其子节点 }); tree.setRootNode(root); //将改该节点设置为tree的根节点 tree.render(); //对tree进行渲染, root.expand(); //避免节点无限展开下去,只显示根节点 //tree.on('click',treeClick); });
页面中的div
<div id="left_tree"></div> //上面的树将在此div中展示。
后台ACTION
dataUrl 对应的action
其主要作用就是把数据库读出来的数据,根据需求来组织成JSON 的格式,而后再返回到页面上即可,至于页面如何解析,那就不用操心了,因为EXTJS 已经给实现了。
JSON 数据格式如下:
[ { text:'基础信息', id: '1', children: [ {id:'0301',text:'部门信息',href:'../../pages/Information/Section.html',hrefTarget:'right',leaf:true}, {id:'0302',text:'角色信息',href:'../../pages/Information/Part.html',hrefTarget:'right',leaf:true}, {id:'0302',text:'人员信息',href:'../../pages/Information/Workers.html',hrefTarget:'right',leaf:true} ] }, { text:'权限控制', id: '2', children:[ {id:'0401',text:'功能权限设置',href:'../../pages/Control/Function.html',hrefTarget:'right',leaf:true}, {id:'0402',text:'模块权限设置',href:'../../pages/Control/Module.html',hrefTarget:'right',leaf:true} ] } ]
说白了就是将后台的数据组织成这种形式后再返回给页面。
这里所要说的是每次拿数据的时候要根据自己的情况拿相应的数据。
代码参考如下
public ActionForward findByParameter(ActionMapping mapping, HttpServletRequest request, HttpServletResponse response) { opFunctionNewManager = (OpFunctionNewManager) this.getweb().getBean("opFunctionNewManager"); // 用于组织json字符串的 sb StringBuffer sb = new StringBuffer(); String fatherOpStr = request.getParameter("node");// 自己制定的参数 try { List list = opFunctionNewManager.getRight(fatherOpStr);// 根据传过来的节点值得到他的孩子节点的组合 int listSize = list.size(); sb.append("["); String opf = ""; for (int i = 0; i < listSize; i++) { OpFunctionNew opn = (OpFunctionNew) list.get(i); String opStr = opn.getOpStr(); opf = opn.getOpForm(); // 说明拿出来的都是父级节点的值 if(null==opf||opf.trim().length()==0) { sb.append("{id:'"+opStr+"',text:'"+opn.getOpTitle()+"'}"); } else { // 一定要注意pjName 后面的"" 否则相加的时候会出错 sb.append("{id:'"+opStr+"',text:'"+opn.getOpTitle()+"',href:'"+pjName+""+opn.getOpForm()+"',hrefTarget:'right',leaf:true}"); } if(i!=listSize-1) { sb.append(","); } } sb.append("]"); System.out.println(sb.toString()); response.setContentType("text/json; charset=utf-8");//注意这里 response.getWriter().write(sb.toString()); } catch (Exception e) { System.out.println("登陆失败"); } return null; }
相关文章推荐
- [置顶] 动态grid java 后台封装json数据返回到前台解析并展示
- java动态JSON数据解析
- extjs JSONStore的load事件/insert,add方法应用 如何动态改变显示数据
- extjs的grid应用(java 使用json绑定数据 翻页)
- extjs JSONStore的load事件/insert,add方法应用 如何动态改变显示数据
- EXTjs 从Java后端传来的Data数据 grid动态转换为标准格式的时间
- extjs的tree的使用(拖动、动态载入json数据、拖动后的事件处理)
- Java 和 Python 解析动态 key 的 JSON 数据
- 【原创】ExtJs实现定时读取数据,动态加载数据,页面不刷新。Struts 2框架下JSON传值
- 【转】extjs加载json数据动态生成树
- java代码用于返回JSON或者XML数据(extJs)
- 动态获取java struts2后台JSON数据填充select 下拉框
- ExtJs根据数据源Json数据来动态创建store与columnModel
- extjs的tree的使用(拖动、动态载入json数据、拖动后的事件处理)
- java 中JSON数据特殊字符的处理
- 前台js传入json或map类型数据给后台以及后台java接收操作
- JSON与JAVA数据的转换-JSONObject.fromObject(map)
- 在项目中用java处理json格式的数据
- Newtonsoft 获取动态key的json数据
- java后台返回json数据前台接收并解析(json)