EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mzeddd on November 06, 2014, 08:09:35 AM



Title: filtering in a tree (and combotree)
Post by: mzeddd on November 06, 2014, 08:09:35 AM
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


Title: Re: filtering in a tree
Post by: stworthy on November 07, 2014, 12:39:28 AM
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');


Title: Re: filtering in a tree
Post by: mzeddd on November 07, 2014, 05:48:05 AM
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...


Title: Re: filtering in a tree (and combotree)
Post by: stworthy on November 07, 2014, 07:39:41 AM
Please try this example http://jsfiddle.net/2anmLm4q/


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on November 07, 2014, 09:05:10 AM
Perfect!

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


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on November 07, 2014, 10:42:27 AM
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!


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on December 10, 2014, 05:14:15 AM
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


Title: Re: filtering in a tree (and combotree)
Post by: stworthy on December 10, 2014, 07:49:06 AM
The 'filter' property and 'doFilter' method will be supported in tree plugin since next version 1.4.2.


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on December 15, 2014, 12:17:02 AM
Thank you very much!


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on February 20, 2015, 07:17:19 AM
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


Title: Re: filtering in a tree (and combotree)
Post by: stworthy on February 20, 2015, 07:05:12 PM
Just set the 'cascadeCheck' property to true, so you can check all the filtering nodes by checking the root node.


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on February 20, 2015, 10:33:30 PM
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


Title: Re: filtering in a tree (and combotree)
Post by: stworthy on February 21, 2015, 08:03:11 AM
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.


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on February 21, 2015, 09:24:57 AM
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


Title: Re: filtering in a tree (and combotree)
Post by: stworthy on February 22, 2015, 10:42:15 AM
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>


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on February 22, 2015, 12:07:38 PM
Thanks! Much better now.

But

If I apply filter #1, check all, apply filter #2, check all, remove filter then I get everything as I expected.
-> All checked by me items stay checked, not checked as not checked.

If I apply filter #1 again and call 'getChecked' I see only items from filter #1.
But I'm expecting to get all checked items even if I don't see them.


Title: Re: filtering in a tree (and combotree)
Post by: stworthy on February 23, 2015, 10:22:17 AM
Please try to download the updated tree plugin from http://www.jeasyui.com/easyui/plugins/jquery.tree.js. The 'getChecked' method returns all the checked nodes, including the hidden nodes.


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on February 24, 2015, 03:06:52 AM
Hi,

Now I'm completely happy. Thanks!

One more small question:
Quote
Is it possible to make this filterfield to be part of EasyUI and make it available for by setting some parameter to TRUE ?
Quote
The 'filter' property and 'doFilter' method will be supported in tree plugin since next version 1.4.2.
Is it completely ready in tree plugin?
Can you give any example of how it could be used? Or is it still should be defined in the same way as in http://jsfiddle.net/2anmLm4q/ (http://jsfiddle.net/2anmLm4q/) ?


Title: Re: filtering in a tree (and combotree)
Post by: stworthy on February 24, 2015, 10:31:19 PM
The 'filter' property defines how to match the node when calling 'doFilter' method.
Code:
$('#tt').tree({
filter: function(q, node){
return node.text.toLowerCase().indexOf(q.toLowerCase()) >= 0;
}
})
To use the full features of the filtering tree, please download the tree plugin from http://www.jeasyui.com/easyui/plugins/jquery.tree.js and include it to the page. The example shows as below:
http://jsfiddle.net/2anmLm4q/5/


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on February 25, 2015, 02:58:12 AM
OK, thanks for answer.

Do you have any plans of making filter 100% integrated into tree?

I mean allow filtering simply like this:

Code:
$('#tt').tree({
    url: ...,
    enableFiltering:true
});

So users do not need to define and associate filter boxes by themselfs.


Title: Re: filtering in a tree (and combotree)
Post by: mzeddd on January 14, 2018, 09:59:58 AM
Hello,

I want to refresh idea from this topic and ask if you can help me to get the same functionality for treeGrid (at least for 'treeField')?

Thanks!