Ext.tree.TreeCheckNodeUI 前面是通过这个组件实现的父节点和子节点的级联 但是源码貌似很复杂个人认为,因此不需要通过这个组件实现. 通过以下这两个函数实现类似的功能. visitAllTreeNodeFun(node, checked); if (node.parentNode && node.parentNode.getUI().checkbox != null) { checkParentFun(node.parentNode); } 但是遇到个新问题,当获取选中的节点时候,只能获取鼠标点击的那个节点,比如点击某一子节点,相关联 的父节点被选中,但是父节点获取不到,级联的相关联节点都获取不到,查询相关资料,改正此处 treeNode.childNodes[i].ui.toggleCheck(checked);//选中 需要先选中,再赋值,才可以获取选中的节点,加上上面的红色那句话就可以了.此时又有个新问题 选中事件发生在子节点,但要通过toggleCheck()改变其父节点未被选中的状态,而一旦改变了父节点未被选中状态为选中状态,就会激发树中的<CheckChange Handler="check(node)" />事件 ,每次激发,传入的节点值node一直在改变,陷入一个死循环。 因此要加入suspendEvents()停止监听事件,执行完后再恢复监听 Ext.onReady(function() { Ext.QuickTips.init(); this.tree = new Ext.tree.TreePanel({ id:'tree', region: 'center', autoScroll: true, animate: true, width: '280', collapsible: (this.centerRegion=='center' ? false : true), split: true, // tbar: [{xtype:"button",text:"logout",listeners:{ "click":function(){ssd(); }} // }], tbar:[' ', new Ext.form.TextField({ width:150, emptyText:'快速检索', enableKeyEvents: true, listeners:{ keyup:function(node, event) { findByKeyWordFiler(node, event); }, } }) ], enableDD: true, // checkModel: 'cascade', //对树的级联多选 // onlyLeafCheckable: false,//对树所有结点都可选 containerScroll: true, border: false, loader: new Ext.tree.TreeLoader({ url:'/neFunction/test', //baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }//解决了获取树节点的级联多选问题 }), root: new Ext.tree.AsyncTreeNode({ id: "0", level: "0", text:"菜单树" }), listeners: { 'checkchange': function (node, checked) { tree.suspendEvents(); //暂停所有监听事件的执行 visitAllTreeNodeFun(node, checked); if (node.parentNode && node.parentNode.getUI().checkbox != null) { checkParentFun(node.parentNode); } tree.resumeEvents(); //重新开始所有监听事件的执行 } }, rootVisible: true }); this.tree.getRootNode().expand(); this.tree.addListener("click",this.ClickNode); this.contextMenu = new Ext.menu.Menu({ id:"treeContextMenu", items:[ { text:"查看", handler:function() { Ext.Msg.alert("...",Ext.getCmp('tree').getSelectionModel().getSelectedNode().id); } } ] }); this.tree.on("contextmenu",function(node,e) { e.preventDefault(); // 阻止弹出默认右键菜单 node.select(); // 选中节点 Ext.getCmp("treeContextMenu").showAt(e.getXY()); }); var timeOutId = null; var treeFilter = new Ext.tree.TreeFilter(tree, { clearBlank : true, autoClear : true }); // 保存上次隐藏的空节点 var hiddenPkgs = []; var findByKeyWordFiler = function(node, event) { clearTimeout(timeOutId);// 清除timeOutId tree.expandAll();// 展开树节点 // 为了避免重复的访问后台,给服务器造成的压力,采用timeOutId进行控制,如果采用treeFilter也可以造成重复的keyup timeOutId = setTimeout(function() { // 获取输入框的值 var text = node.getValue(); // 根据输入制作一个正则表达式,'i'代表不区分大小写 var re = new RegExp(Ext.escapeRe(text), 'i'); // 先要显示上次隐藏掉的节点 Ext.each(hiddenPkgs, function(n) { n.ui.show(); }); hiddenPkgs = []; if (text != "") { treeFilter.filterBy(function(n) { // 只过滤叶子节点,这样省去枝干被过滤的时候,底下的叶子都无法显示 return !n.isLeaf() || re.test(n.text); }); // 如果这个节点不是叶子,而且下面没有子节点,就应该隐藏掉 tree.root.cascade(function(n) { if(n.id!='0'){ if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){ hiddenPkgs.push(n); n.ui.hide(); } } }); } else { treeFilter.clear(); return; } }, 500); }; // 过滤不匹配的非叶子节点或者是叶子节点 var judge =function(n,re){ var str=false; n.cascade(function(n1){ if(n1.isLeaf()){ if(re.test(n1.text)){ str=true;return; } } else { if(re.test(n1.text)){ str=true;return; } } }); return str; }; new Ext.Viewport({ renderTo:Ext.getBody(), layout : 'border', autoShow:true, items: [this.tree] }); }); function ClickNode(node){ console.info(node.attributes.id); } /** 父节点的选择 */ function checkParentFun (treeNode) { var i; var check = false; var nocheck = false; if (treeNode.hasChildNodes()) { for (i = 0; i < treeNode.childNodes.length; i++) { if (treeNode.childNodes[i].getUI().checkbox.checked) { check = true; } else { nocheck = true; } } } if (check == true && nocheck == false) { // 可以全选 treeNode.getUI().checkbox.checked = true; } else if (check == true && nocheck == true) { // 半选 孩子节点既有选中的也有未选中的 这种情况则父节点还是选中 treeNode.ui.toggleCheck(true); treeNode.getUI().checkbox.checked = true; if(treeNode.parentNode&& treeNode.parentNode.getUI().checkbox != null){ checkParentFun(treeNode.parentNode); } } else if (check == false && nocheck == true) { // 全不选 孩子节点都是未选中的则父节点取消选中 treeNode.ui.toggleCheck(false); treeNode.getUI().checkbox.checked = false; treeNode.collapse();//父节点收缩 if(treeNode.parentNode&& treeNode.parentNode.getUI().checkbox != null){ checkParentFun(treeNode.parentNode); } } }; /** 孩子节点的选择 */ function visitAllTreeNodeFun (treeNode,checked) { var i; checked ? treeNode.expand() : treeNode.collapse();//点击某一节点让子节点都展开全部展开 if (treeNode.hasChildNodes()) { for (i = 0; i < treeNode.childNodes.length; i++) { if (treeNode.childNodes[i].getUI().checkbox) { treeNode.childNodes[i].ui.toggleCheck(checked);//选中 treeNode.childNodes[i].getUI().checkbox.checked = checked;// visitAllTreeNodeFun(treeNode.childNodes[i],checked); } } } }; /** 根据路径对于节点的选择以及获取选中的节点 */ function ssd(){ tree.expandPath("/0/201/401/511");// var treeNode = Ext.getCmp("tree").getNodeById("511"); if (treeNode) { treeNode.getUI().checkbox.checked = true; } var checkedNodes = Ext.getCmp("tree").getChecked(); var s = []; for (var i = 0; i < checkedNodes.length; i++) { s.push(checkedNodes[i].text); } alert(s); }
相关推荐
将文件拷贝到extjs根目录下。运行即可。实现了选中之类。父类联动选中
NULL 博文链接:https://mawj0326-163-com.iteye.com/blog/1628470
extjs mvvm增删查改模糊查询,10分钟学会前端mvvm架构,有详细的注释,直接可以使用。
说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!
Extjs动态树的实现以及节点拖拽
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释
extjs实现动态树
ExtJS在修改这样的页面上赋值是很方便的,在正文中1.2.1代码中可以看出,一行代码就可以搞定,但这是对于普通控件而言,如文本框。对于ComboBox可没这么简单...
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
Extjs分页使用java实现数据库数据查询.docx
Extjs实现用户登录。。。。。。。。。。。。。。。。。
extjs实现增删节查改,跑得起来的extjs,由于太大了,把jar包删了,如差jar包,可以找我要
ExtJS实现Excel的导出功能(poi)
Extjs实现翻书效果,翻页会有演示效果。
extjs实现报表
下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。 在 treepanel 里添加以下代码即可实现级联选中效果 主要实现了以下效果: 1.点击父级批量设置所有子节点选中状态 2.点击当前节点寻找所有父级并设置选中状态 3....
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
Extjs框架实现类似QQ的聊在功能.好友上线,下线提醒.留言,发表情,来消息提醒等功能