EXTJS 动态树 JAVA JSON 来组织数据

 

如果使用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字符串的 sbStringBuffer 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;}