EasyUI Forum
March 04, 2024, 12:52:51 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: filtering in a tree (and combotree)  (Read 38202 times)
mzeddd
Full Member
***
Posts: 223



View Profile
« 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
« Last Edit: November 07, 2014, 06:37:46 AM by mzeddd » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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');
Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #2 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...
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: November 07, 2014, 07:39:41 AM »

Please try this example http://jsfiddle.net/2anmLm4q/
Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #4 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?
Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #5 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!
« Last Edit: November 07, 2014, 10:52:00 AM by mzeddd » Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #6 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #7 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.
Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #8 on: December 15, 2014, 12:17:02 AM »

Thank you very much!
Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #9 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #10 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.
Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #11 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #12 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.
Logged
mzeddd
Full Member
***
Posts: 223



View Profile
« Reply #13 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #14 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>
Logged
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!