Tree allows you to filter nodes on the client side.
Filtering is Tree can be invoked by calling the filter method. The method can be called on some event or action, i.e. button click or page load.
Sorting Tree on button click
<input type='button' onkeypress='tree.filter("#value#", this.value);'>
<script type="text/javascript" charset="utf-8"> tree = webix.ui({ view:'tree', ...})
</script>
The library provides special property filterMode to define how the tree items will be filtered.
The filterMode property is an object that can contain 3 attributes:
Using the filterMode parameter
webix.ui({
view:"tree",
filterMode:{
showSubItems:false,
level:2
}
});
For example, if you add an input and button to the page and want to filter Tree by clicking on it, you code may look like this:
Custom filtering function
<input type="text"><input type="button" value='filter' onclick='filterText(this);'>
<script> function filterText(node){
var text = node.previousSibling.value;
if (!text) return tree.filter();
tree.filter(function(obj){ //tree is a Tree instance
return obj.year == text;
})
}
</script>
Back to top