ExtJS Tree刷新后自动展开并选择节点(二)
实例讲解:输入文件号查找文件,并将查找到的文件展示出来。
1.输入文件号点击查找:
tbar: [ { xtype:'label', text: '文件号:' },{ xtype : 'textfield', id: 'searchFor', allowBlank: true, width: 120 },{ text: '查找', iconCls: 'filter', handler : function(){ var searchFor = Ext.getCmp("searchFor").getValue(); if(searchFor==''){ return; } //调用服务端查找 Ext.Ajax.request({ url : 'getIndustry.base?doType=searchPolicy', params : {searchFor: searchFor}, success : onSearchSuccessCallback, failure : function(response,option) { Ext.Msg.alert("失败","查找过程发生错误!"); } }); } } ] });
2.通过返回的Path路径,展开树目录,并选中节点:
//通过Path展开树 function onSearchSuccessCallback(response,option){ var result = Ext.util.JSON.decode(response.responseText); if(result.match=='no'){ Ext.Msg.alert( "查找结果","没有匹配节点!"); }else{//展开路径,注意Path是以节点id加上"/"来间隔的。 tree.expandPath('tree/tree-root/' + result.path, 'id', onExpandPathComplete); } } //通过Path展开完成后的方法 function onExpandPathComplete(bSuccess, oLastNode) { if(!bSuccess){ return; } selectNode(oLastNode); } //选中节点 function selectNode(node){ if(node){ node.ensureVisible();//确保节点已显示出来。 node.select();//选中节点——相当于单击该节点。 //node.fireEvent('click', node);//此处与node.select()功能相同。 } }
返回的Path示例:
{match:'yes',path:'01/2961'}
注意:
1.选中节点——相当于单击了该节点
方式一:node.select();
方式二:node.fireEvent("click",node);
2.通过path展开树:
注:没有后面的onExpandPathComplete也是可以的,如下:
tree.expandPath('tree/tree-root/' + result.path, 'id')
Servlet:
else if("searchPolicy".equals(action)){ String searchFor = request.getParameter("searchFor"); String searchType = request.getParameter("sType"); int stype = 0; //查找的匹配字段。1:和IBM匹配,0:默认,和名称匹配 try{ stype = Integer.parseInt(searchType); }catch(Exception e){ } PolicyDao pdao =new PolicyDao(); String path = pdao.searchPolicyNode(searchFor, stype, year); if(path ==null||"".equals(path)){ oStream = "{match:'no'}"; }else{ oStream = "{match:'yes',path:'"+path+"'}"; } response.setContentType("text/json;charset=UTF-8"); PrintWriter out=response.getWriter(); out.print(oStream); out.close(); return; }
Dao:
public String searchPolicyNode(String cont,int matchType,int year){ String path = null; String findBm=""; //树的组织sql,始终是按固定顺序的。 StringBuffer treeView = new StringBuffer("SELECT rownum AS R,O.* FROM ("); treeView.append(" SELECT BM,MC,TITLE,FILENO,PID,ISLEAF,LEVEL FROM("); treeView.append(" SELECT BM,MC,'' AS TITLE,MC AS FILENO,PID,0 AS ISLEAF FROM BM_CONT WHERE TABLE_BM='BM_GRADE' AND YEAR=").append(year); treeView.append(" UNION SELECT TO_CHAR(ID) AS BM,FILENO AS MC,TITLE,FILENO,GID AS PID,1 AS ISLEAF FROM POLICY "); treeView.append(" )CONNECT BY PRIOR BM=PID START WITH PID IS NULL )O "); //查找 StringBuffer sql = new StringBuffer("select b.r,b.bm,b.pid,b.mc,b.isleaf,b.title,b.fileno from( "); sql.append(treeView); sql.append(") b where "); sql.append((matchType ==0)?"fileno":"title"); sql.append(" like '%").append(cont); sql.append("%' and rownum=1"); Session s = null; try{ s = HibernateUtil.getSession(); s.beginTransaction(); SQLQuery squery = s.createSQLQuery(sql.toString()); List lst =squery.list(); if(lst!=null&&lst.size()>0){ Object[] flds=(Object[])lst.get(0); findBm =(String)flds[1]; } if(findBm!=null&&!"".equals(findBm)){ sql = new StringBuffer("SELECT GID,ID FROM POLICY WHERE ID=").append(findBm); squery = s.createSQLQuery(sql.toString()); lst =squery.list(); if(lst!=null&&lst.size()>0){ StringBuffer sp =new StringBuffer(""); Object[] flds=(Object[])lst.get(0); sp.append((String)flds[0]).append("/"); sp.append(((BigDecimal)flds[1]).intValue()); path = sp.toString(); } s.getTransaction().commit(); } }catch (Throwable e) { logger.error(e.toString()); HibernateUtil.endSession(s); }finally{ HibernateUtil.endSession(s); } return path; }
获取的树的Json数据示例:
[ { "id": "01", "text": "国家级", "cls": "folder", "children": [ { "id": "2961", "text": "财建[2012]616号", "cls": "file", "pid": "01", "leaf": true, "autoid": 0, "expanded": false }, { "id": "2962", "text": "财建[2012]1111号", "cls": "file", "pid": "01", "leaf": true, "autoid": 0, "expanded": false }, ... ... ... ], "leaf": false, "autoid": 0, "expanded": false } ]
操作图示:
1.查找前:
2.查找后:(通过path展开目录,并选中查找到的节点)
相关推荐
区别在于,远程脚本调用方式加载树节点信息使用的是WebInvokeTreeLoader,需要通过fn属性来指定用于加载数据的远程方法,并在beforeload事件处理器设置参数远程方法调用的参数值。而传统的树节点加载器是Ext.tree....
ExtJs Tree
Extjs的tree Extjs的tree Extjs的tree Extjs的tree Extjs的tree
ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类(项目和设备) 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作,后台操作很简陋...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
最近在学习extjs tree,有两个不错的例子,希望对需要的朋友有所帮助!
extjs tree 异步加载树型完整的一个web工程,自已已经试过,可用。
extjs tree 学习资料extjs tree 学习资料extjs tree 学习资料extjs tree 学习资料
ExtJs4 Checkbox tree
extjs的tree的使用.doc
Extjs Tree + JSON + Struts2 示例源代码
Extjs Tree + JSON + Struts2 例子
access 数据库,可增加 删除树节点!!
利用extjs框架实现的后台经典显示, tree框架,动态加载。
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
TreePanel的各项属性能帮助我们动态加载extjs tree
分享一个ExtJs Tree, 完整的带有复选框的树形结构
将文件拷贝到extjs根目录下。运行即可。实现了选中之类。父类联动选中