jQuery MiniUI 开发教程 树形控件 树操作:过滤树(十一)
过滤树
参考示:过滤树
filter节点过滤
tree.filter(function (node) {
var text = node.text ? node.text.toLowerCase() : "";
if (text.indexOf(key) != -1) {
return true;
}
});
clearFilter取消过滤
tree.clearFilter();
Ext 树过滤 tree filter 多余 二级目录 bug 问题
出处:http://blog.sina.com.cn/s/blog_68141ec50100juhn.html
ext的tree的filter即搜索功能,按照ext的API写有一个bug,当节点下有二级子节点的时候,filter其它节点,不论此节点是否满足filter条件,都会出现,搞了半天才将这个bug解决掉,现在记下来,以备以后用到。
原代码:
hiddenPkgs = [];
tree.root.cascade(function(n) {
if(!n.isLeaf()&& n.ui.ctNode.offsetHeight<3){
n.ui.hide();
hiddenPkgs.push(n);
}
});
bug主要出在这段控制隐藏的代码上,其中关键是n.ui.ctNode.offsetHeight<3,当节点有子节点的时候,他的n.ui.ctNode.offsetHeight就会大于3,所以会显示。修改这个bug,只需要修改这段代码即可。在源过滤条件后面加个条件,修改后的代码如下:
修改一:只支持对叶子的搜索,不支持对枝干的搜索
hiddenPkgs = [];
tree.root.cascade(function(n) {
if(!n.isLeaf()&& n.ui.ctNode.offsetHeight<3&& !re.test(n.text)){
n.ui.hide();
hiddenPkgs.push(n);
}
if(n.id!='root'){
if(!n.isLeaf() && n.ui.ctNode.offsetHeight >= 3 && hasChild(n,re)==false&& !re.test(n.text)){
n.ui.hide();
hiddenPkgs.push(n);
}
}
});
function hasChild(n,re){
var str=false;
n.cascade(function(n1){
if(n1.isLeaf() && re.test(n1.text)){
str = true;
return;
}
});
return str;
}
}
修改二:支持对叶子、枝干的搜索。
var hiddenPkgs = [];
var filter = new Ext.tree.TreeFilter(tree, {
clearBlank: true,
autoClear: true
});
function filterTree(){
var text = members_name.getValue();
Ext.each(hiddenPkgs, function(n){
n.ui.show();
});
if(!text){
filter.clear();
return;
}
tree.expandAll();
var re = new RegExp(Ext.escapeRe(text), 'i');
filter.filterBy(function(n){
var textval = n.text;
return !n.isLeaf() || re.test(n.text);
});
// hide empty packages that weren't filtered
hiddenPkgs = [];
tree.root.cascade(function(n) {
if(!n.isLeaf()&& n.ui.ctNode.offsetHeight<3&& !re.test(n.text)){
n.ui.hide();
hiddenPkgs.push(n);
}
if(n.id!='root'){
if(!n.isLeaf() && n.ui.ctNode.offsetHeight >= 3 && hasChild(n,re)==false&& !re.test(n.text)){
n.ui.hide();
hiddenPkgs.push(n);
}
}
});
function hasChild(n,re){
var str=false;
n.cascade(function(n1){
if(re.test(n1.text)){
str = true;
return;
}
});
return str;
}
}
修改二与修改一是有区别的,并且修改二不能取代修改一,因为,修改一也有应用点,如:如果只让用户对叶子进行搜索那么应该是当搜索枝干时应该没有结果,若用修改二则不很好,用修改一更合理
var tbar = new Ext.Toolbar({
buttonAlign : 'center',
items : [{xtype : 'textfield',emptyText : '根据企业名称检索企业...',id:'filter_input',width : 200}]
});
this.userTreepanel = new Ext.tree.TreePanel({
renderTo : 'tree_menu_'+this.pageId,
region:'north',
title:'用能单位树',
split:true,
width: 210,
tbar : tbar,
height : (this.getBodyHeight(0)-10),
collapsible: false,
margins:'5 0 5 0',
loader: this.treeLoader,
rootVisible:true,
lines: false,
singleClickExpand : true,
autoScroll:true,
root: new Ext.tree.AsyncTreeNode({text:"企业树",id:'-1',expanded:true}),
listeners: {
'click' : function(node,e) {
Main.getPageControler().treeNodeClicked(node);
Main.getPageControler().commit(node);
}
}
});
var tree = this.userTreepanel;
var filter = new Ext.tree.TreeFilter(tree, {
clearBlank : true,
autoClear : true
});
// 保存上次隐藏的空节点
var hiddenPkgs = [];
var field = Ext.get('filter_input');
field.on('keyup', function(e) {
var text = field.dom.value;
// 先要显示上次隐藏掉的节点
Ext.each(hiddenPkgs, function(n) {
n.ui.show();
});
// 如果输入的数据不存在,就执行clear()
if (!text) {
filter.clear();
return;
}
tree.expandAll();
// 根据输入制作一个正则表达式,'i'代表不区分大小写
var re = new RegExp(Ext.escapeRe(text), 'i');
filter.filterBy(function(n) {
// 只过滤叶子节点,这样省去枝干被过滤的时候,底下的叶子都无法显示
return !n.isLeaf() || re.test(n.text);
});
// 如果这个节点不是叶子,而且下面没有子节点,就应该隐藏掉
hiddenPkgs = [];
tree.root.cascade(function(n) {
if (!n.isLeaf() && n.ui.ctNode.offsetHeight < 3) {
n.ui.hide();
hiddenPkgs.push(n);
}
});
});
相关推荐
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
ext过滤树,可根据输入字符,只显示符合条件的节点。
ExtJs Filter 实现表格行过滤Demo
extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...
ExtJs Grid Filter 实现表格的行过滤
extjs增删改查分页树
extjs 树 搜索extjs 树 搜索vvextjs 树 搜索extjs 树 搜索extjs 树 搜索extjs 树 搜索extjs 树 搜索
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
extjs的pagingtoolbar 点击下一页时,出现store的load时间,但是只有start和limit这两个参数,这样就出现了,点击下一页的时候,查询出 的结果和条件不符合。虽然可以通过一次性查出所有记录的方法解决,但是我更...
ExtJs 连接数据库并且生成动态树 ExtJs 连接数据库并且生成动态树 ExtJs 连接数据库并且生成动态树
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
让你了解给折叠布局中加入树的文档你值得拥有,全文通过具体的实例为读者具体的讲述。
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
extjs实现动态树
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
extjs 树形下拉列表框,可以进行数据选择,数据回显。
纯Extjs代码,对初学Ext有点点帮助
Extjs图片上传,更多资料请见我的资源:Extjs3.1.1官方实例Asp.net版http://download.csdn.net/source/2709967
ExtJS4下拉树组件 ExtJS4下拉树组件