ExtJS Tree点击选择节点,不展开/展开(三)
实例讲解:点击触发域(Ext.form.TriggerField)三角按钮,弹出树面板窗口,并将触发域中的内容在树面板中选中,并展开选中节点的父目录。
一.选中节点,不展开:
1.创建Tree:
//1.定义根节点:主管部门 var departRoot = new Ext.tree.AsyncTreeNode({ text:"主管部门", draggable:false, expanded:true, //节点展开 id:'depart-root' }); //2.定义子节点数据加载器 var dloader = new Ext.tree.TreeLoader({ dataUrl:'getTree.base?doType=getDTreeByGrade&dtype=0', baseParams :{pid:''}, baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性 }); //3.获取主管部门子节点数据 dloader.on("beforeload",function(treeLoader, node){ treeLoader.baseParams.pid = node.id; },this); //4.定义树面板,显示节点数据 var departTree = new Ext.tree.TreePanel({ id:'departTree', root: departRoot, checkModel: 'multiple', animate:false, onlyLeafCheckable: true, enableDD:false, border:false, rootVisible:true, autoScroll :true, lines: false, loader:dloader, tbar:[ { xtype:'label', text:"文件号:" },{ xtype:"textfield", id:"serchFor5", allowBland:true, width:120 },{ text:"查找", iconCls:"filter", handler : search } ] });
2.创建触发域:
var departTg = new Ext.form.TriggerField({ fieldLabel:'主管部门', width:250, readOnly: true, id:'departTg', name:'departTg', emptyText:"请选择主管部门" });
3.创建窗口:
var departWin = new Ext.Window({ title:'主管部门', width:300, height:260, autoScoll:true, layout:'fit', closeAction:'hide', collapsible:true, items:[departTree], buttons:[{ text:"确定", handler:function(){ var node = departTree.getChecked(); if(node.length == 0){ Ext.Msg.alert("系统提示","请选择主管部门"); return; } var name = new Array(); var value = new Array(); dids = new Array(); for (var i = 0; i < node.length; i++) { dids.push(node[i].id); name.push(node[i].text); value.push(node[i].id); } departTg.setValue(name.join());//给触发域赋值 Ext.getCmp("departid").setValue(value.join()); departWin.hide(); } },{ text:"取消", handler:function(){ departWin.hide(); } } ] });
4.增加单击事件和选择事件:
//选中目录同时展开目录 departTree.on("checkchange",function(node,checked){ if(checked){ node.expand(); } }); //单击时,若是目录则展开或收缩,若是子节点则选中或不选中 departTree.on("click",function(node){ if(!node.isLeaf()){ node.toggle(); } else{ node.ui.toggleCheck(); } });
5.单击触发域打开树窗口并显示勾选项:
departTg.onTriggerClick = departTrigFun; function departTrigFun(e){ departWin.show(); var childNodes = departRoot.childNodes; if(childNodes.length > 0) { showCheckDeparts(childNodes); } else { loadDepart(); } } //加载树并勾选对应项 function loadDepart(){ dloader.on("load",function(treeLoader,node){ showCheckDeparts(node); }); } //勾选对应项 function showCheckDeparts(childNodes){ //先清楚全部勾选项 for (var i = 0; i < childNodes.length; i++) { childNodes[i].ui.toggleCheck(false); } //将触发域中的内容分割为一个数组 departs = departTg.getValue(); childNodes = departRoot.childNodes; var departArr = null; if(departs != null) { departArr = departs.split(","); } //循环对比,相对应的进行勾选 if(departArr != null && departArr.length > 0) { for (var j = 0; j < childNodes.length; j++) { var text = childNodes[j].text; for (var i = 0; i < departArr.length; i++) { if(departArr[i] != text){ continue; } childNodes[j].ui.toggleCheck(true); } } } }
6.图示:
二.选中节点,并展开:
1.创建Tree:
//1 定义根节点 var auditRoot = new Ext.tree.AsyncTreeNode({ id:'tree-root', text:"部门", expanded:true, //根节点默认展开(注意和TreePanel中的rootVisible:true的联系) draggable:false //根节点不可拖动 }); //2 定义节点数据加载器 var auditLoader = new Ext.tree.TreeLoader({ dataUrl:'getKeshiUsersByGrade.up?doType=getKeshiUsersByGrade', //此处不是url,和Store的Proxy不同 baseParams :{pid:''}, baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} //必须有该项,不然树节点无法出现选择框 }); //3 定义数据加载前触发方法 auditLoader.on("beforeload",function(treeLoader,node){ auditRoot.setText(dname); treeLoader.baseParams.pid = node.id; treeLoader.baseParams.did = did; },this); //4 定义树形面板,用于显示数据 var auditTree = new top.Ext.tree.TreePanel({ /**注意top!!!*/ root:auditRoot, //根节点 loader:auditLoader, //数据加载器 checkModel:"single", //复选框只能单选,多选为:multiple,级联:cascade rootVisible:true, //显示根节点 autoScroll:true, animate:false, enableDD:false, //不允许子节点拖动 onlyLeafCheckable:true, width:250 });
2.创建触发域:
var selectedAuditRow;//定义全局变量,获取点击列表某一行时通过复选框获得的行号。 var auditTrigger = new Ext.form.TriggerField({ emptyText:"请选择...", allowBlank:false, readOnly:true });
3.创建窗口:
var auditTreeWin = new top.Ext.Window({ /**注意top!!!*/ title:"用户选择", layout:"fit", closeAction:"hide", modal:true, width:250, height:250, items:auditTree, buttons:[ { text:"确定", handler:function(e){ /*点击选择树节点并将值显示在触发域的方法!*/ var node = auditTree.getChecked(); //获取被选中的树节点 if(!node || node.length < 1){ top.Ext.Msg.alert("系统提示","请选择科室用户!"); return; } var name = new Array(); var value = new Array(); for (var i = 0; i < node.length; i++) { name.push(node[i].text); value.push(node[i].id); } var data = selectedAuditRow.data; //获取选择的行的Record的Data数据对象 /*data["auditUserId"]= name.join(); —— —— 此处用这种方式给触发域赋值出错!!!必须用下面的方式!!! */ auditTrigger.setValue(name.join()); auditTreeWin.hide(); } },{ text:"取消", handler:function(){ auditTreeWin.hide(); } } ] });
4.增加单击事件和选择事件:
//选中目录同时展开目录 auditTree.on("checkchange",function(node,checked){ if(checked){ node.expand(); } }); //单击时,若是目录则展开或收缩,若是子节点则选中或不选中 auditTree.on("click",function(node){ if(!node.isLeaf()){ node.toggle(); } else{ node.ui.toggleCheck(); } });
5.单击触发域打开树窗口并显示勾选项:
/* 单击触发域打开树窗口并显示勾选项 */ auditTrigger.onTriggerClick = clickTriggerFun; function clickTriggerFun(e){ auditTreeWin.show(); var parentNodes = auditRoot.childNodes; if(parentNodes.length > 0) { showCheckedNode(parentNodes); } else { loadTree();//节点为0,则先加载树 } } /* 加载科室用户并勾选对应项 */ function loadTree(){ auditLoader.on("load",function(treeLoader,node){ showCheckedNode(node.childNodes); }); } /* 勾选对应的选中项,并展开选中项的父目录 */ function showCheckedNode(parentNodes){ //先展开再收缩父节点,让子节点充分显示 for (var i = 0; i < parentNodes.length; i++) { parentNodes[i].expand(); parentNodes[i].collapse(); } //先循环清楚全部勾选项 for (var i = 0; i < parentNodes.length; i++) { var childNodes = parentNodes[i].childNodes; for (var j = 0; j < childNodes.length; j++) { childNodes[j].ui.toggleCheck(false); } } //将触发域中的内容字符串分割为一个数组 var tgValue = auditTrigger.getValue(); childNodes = auditRoot.childNodes; var checkedArr = null; if(tgValue != null) { checkedArr = tgValue.split(","); } //循环对比,相对应的进行勾选 if(checkedArr != null && checkedArr.length > 0) { for (var i = 0; i < parentNodes.length; i++) { var childNodes = parentNodes[i].childNodes; for (var j = 0; j < childNodes.length; j++) { var text = childNodes[j].text; for (var k = 0; k < text.length; k++) { if(checkedArr[k] == text) { childNodes[j].ui.toggleCheck(true);//勾选 childNodes[j].parentNode.expand();//展开父节点 } } } } } }
注意:选中节点同时展开其父目录
6.图示:
注意区别:
1.第一个只有一级目录,子节点都在一级目录下,传参用childNodes。
2.第二个有二级目录,子节点都在第二级目录下,传参用parentNodes。
相关推荐
区别在于,远程脚本调用方式加载树节点信息使用的是WebInvokeTreeLoader,需要通过fn属性来指定用于加载数据的远程方法,并在...而传统的树节点加载器是Ext.tree.TreeLoader,需要指定一个url来获得json数据。
ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类(项目和设备) 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作,后台操作很简陋...
access 数据库,可增加 删除树节点!!
TreePanel的各项属性能帮助我们动态加载extjs tree
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
3.动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格...
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
ajax技术,extjs框架中tree的节点的添加,修改,删除及拖曳
通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树时将node.id做为参数 通过split("_"),根据数据的长度就...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
利用annotation和struts2json插件完美的做出了服务器端请求tree节点的例子
实现带有复选框的树,选中父节点时,选中所有子节点。取消所有子节点时,才能取消根节点,感兴趣的朋友可以了解下本
动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object...
主要介绍了Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法,需要的朋友可以参考下
结合tree组件+grid组件+window组件实现json数据的自动加载,点击后自动勾选父子节点,前后台源代码
本文档是自己亲身实践的总结文档,包括构造ext动态树的js代码,action层,service层,dao层以及实体类的示例,思路很清晰。如还有疑问,可以留言。最后附上了一段增加树节点的示例。删除修改类同。
通过树实现动态加载以及实现添加节点、删除节点、修改节点文本已经通过拖动移动节点等功能。先创建树的表结构:插入以下数据:首先创建基本页面:代码中已包含了样式、ExtJS的脚本文件和语言包。其实bootstrap.js会...
Treepanel 增加多选框,可以在树状节点多重选择
rootVisible:false,//是否显示跟节点 collapseMode:'mini',//在分割线处出现按钮 collapsible: true, margins:'0 0 5 5', loader:new Ext.tree.TreeLoader({ dataUrl:'extExampleTree.json', requestMethod: 'GET' ...