<script type="text/javascript" src="/resources/js/combox/ComboBoxCheckTree.js"></script> <script type="text/javascript" src="/resources/js/subQuery/TreeUI.js"></script> 主要是用到 ComboBoxCheckTree和TreeUI两个控件 模糊查询关键是使用 comboBoxCheckTree.on('beforequery',function(e){ var combo = e.combo; if (!e.forceAll) { var value=e.query; findByKeyWordFiler(value); } }); 重写下拉框的beforequery事件.赋值操作发现个问题ComboBoxCheckTree源码中有个 this.tree.on('check', function(node, checked) { combox.setValue(); }); 起赋值作用的,但是有些选中的节点,并没有赋值,取消选中却赋值了,不知道为什么, 于是修改了 this.tree.on('checkchange', function(node, checked) { combox.setValue(); });改为'checkchange'事件,就解决了该问题. 源码如下 Ext.onReady(function() { Ext.QuickTips.init(); var contenttree = new Ext.tree.TreePanel({ checkModel: 'cascade', //对树的级联多选 onlyLeafCheckable: false,//对树所有结点都可选 rootVisible:false, autoScroll:false, autoHeight:true, loader: new Ext.tree.TreeLoader({ dataUrl:'/neFunction/test', baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } }), root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'}) }); var comboBoxCheckTree = new Ext.ux.ComboBoxCheckTree({ renderTo : 'comboBoxCheckTree', width : 300, height : 150, tree:contenttree, selectValueModel:'leaf' }); comboBoxCheckTree.on('beforequery',function(e){ var combo = e.combo; if (!e.forceAll) { var value=e.query; findByKeyWordFiler(value); } }); var timeOutId = null; var treeFilter = new Ext.tree.TreeFilter(comboBoxCheckTree.tree, { clearBlank : true, autoClear : true }); // 保存上次隐藏的空节点 var hiddenPkgs = []; var findByKeyWordFiler = function(node) { clearTimeout(timeOutId);// 清除timeOutId comboBoxCheckTree.tree.expandAll();// 展开树节点 // 为了避免重复的访问后台,给服务器造成的压力,采用timeOutId进行控制,如果采用treeFilter也可以造成重复的keyup timeOutId = setTimeout(function() { // 获取输入框的值 var text = node; // 根据输入制作一个正则表达式,'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); }); // 如果这个节点不是叶子,而且下面没有子节点,就应该隐藏掉 comboBoxCheckTree.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; }; });
相关推荐
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
ExtJS4下拉树组件 ExtJS4下拉树组件
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
extjs下拉树
extjs实现的下拉树的核心代码,包括js,jsp,对有需要的同仁提供参考与学习之用
extjs下拉树,在网上找了很多,发现bug实在让人头大,干脆自己写了个下拉树组件,功能全面
简单的修改下Extjs 的引用路径 双击Index.html 就可以看到效果了。
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
Extjs 下拉列表
extjs 树形下拉列表框,可以进行数据选择,数据回显。
使用方法: var comb = Ext.create('Ext.ux.ComboTree',{ name:'xzqh', dicName:'test', width : 270, fieldLabel : '行政区划', url:'getDic', all:true, labelWidth : 60, multiple:true ...
Extjs4多选树,支持多选和单选,能够实现默认值选中,数据存放在json,里面有明确的提示信息。很适合初学者借鉴学习
extjs实现动态树
自定义下拉树,你懂的,内附图和前后台源代码
NULL 博文链接:https://lpcjrflsa.iteye.com/blog/1704537
Extjs 下拉菜单实现拼音输入进行检索
ExtJs4实现下拉树选择框ComboTree, 文档中包含代码。
extjs4 框架实现树形结构的下拉框,并支持多选、复选,项目中开发实际用到的,这里提供了前段的js代码,大家有用到的,可以进行参考。