filtering in a tree (and combotree)

[mzeddd]

Hi,

Is it possible to add filtering possibility to tree elements?

I have tree (with checkboxes) with big number of elements and sometimes it is hard to find items that I need in different branches.

Filter from my point of view could help me to narrow list of visible items and make selecting more simple.

Thanks in advance!

Valery

[stworthy]

The following extended method 'doFilter' achieve the filtering functionality.

Code:

(function($){
	function forNodes(data, callback){
		var nodes = [];
		for(var i=0; i<data.length; i++){
			nodes.push(data[i]);
		}
		while(nodes.length){
			var node = nodes.shift();
			if (callback(node) == false){return;}
			if (node.children){
				for(var i=node.children.length-1; i>=0; i--){
					nodes.unshift(node.children[i]);
				}
			}
		}
	}

	$.extend($.fn.tree.methods, {
		doFilter: function(jq, text){
			return jq.each(function(){
				var target = this;
				var data = $.data(target, 'tree').data;
				var ids = {};
				forNodes(data, function(node){
					if (node.text.toLowerCase().indexOf(text.toLowerCase()) == -1){
						$('#'+node.domId).hide();
					} else {
						$('#'+node.domId).show();
						ids[node.domId] = 1;
					}
				});
				for(var id in ids){
					showParents(id);
				}

				function showParents(domId){
					var p = $(target).tree('getParent', $('#'+domId)[0]);
					while(p){
						$(p.target).show();
						p = $(target).tree('getParent', p.target);
					}
				}
			});
		}
	});

})(jQuery);

Usage example:

Code:

$('#tt').tree('doFilter', 'f1');
$('#tt').tree('doFilter', 'f2');

[mzeddd]

Hi,

Thank you stworthy, but sorry I mixed up tree and combotree.

This example does not work for my combotree.

I've been thinking about this filter like in picture below...

[stworthy]

Please try this example http://jsfiddle.net/2anmLm4q/

[mzeddd]

Perfect!

Just one last moment. How can I make "filter" button work using "Enter" not only clicking on it?

[mzeddd]

Just one last moment. How can I make "filter" button work using "Enter" not only clicking on it?

Never mind, Fixed by onChange event for easyui-textbox.

Thanks again!

[mzeddd]

Hi,

Bringing up the topic.

Is it possible to make this filterfield to be part of EasyUI and make it available for by setting some parameter to TRUE ?

It would make live much easyer in case if we have to create big number of such elements

Thanks

[stworthy]

The 'filter' property and 'doFilter' method will be supported in tree plugin since next version 1.4.2.

[mzeddd]

Thank you very much!

[mzeddd]

Hi,

I've got new idea from users on top of this filter.

Is it possble to enable "cascadeCheck" for results after the filtering?

For example I have over 100 records, after the filtering I get 20 and I need to select all of them.

It is not a problem to check all of them one by one manually, but it is not very fun to repeat it several times in a row.

//V

[stworthy]

Just set the 'cascadeCheck' property to true, so you can check all the filtering nodes by checking the root node.

[mzeddd]

It is not possible with 'doFilter' code above.
It selects all elements in a branch even after the filtering I have 2 or 3 items.

Does it work in what will be relieased?

Thanks

// V

[stworthy]

Please try to download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip. And then call the  'getChecked' method to return the checked nodes.

[mzeddd]

Better!

But still not perfect.

Ex1:
Have combotree with filter.
I do filter and get small amount of records. Select all of them at once. Good
I remove filter and see all elements in the branch checked Not good

Ex2:
Have combotree with filter.
I do filter and get small amount of records. Select all of them at once. Good
I apply new filter to add new elements (in the same branch). Get new list but all items are already checked. But should not be checkedNot good

Ex3:
Very close to Ex2 but results from two branches. Result is also Not good

I mean 'big check' should check only results of filters job. If we have something else checked or unchecked it should stay untouched.

// V

[stworthy]

If you want to use the partial checkbox in a tree, please try to download the preview tree plugin from http://www.jeasyui.com/easyui/plugins/jquery.tree.js. Before using it please add the CSS style to your page.

Code:

<style>
  .tree-node-hidden{
    display: none;
  }
</style>