How to trees on jQuery
Often there are tasks in which you want to display the tree structure of the relationship of any entities. For example, navigation through the file system, the menu of the site or the contents of the textbook.
The simplest option to display the tree structure in HTML is lists. But we are interested in trees with dynamic properties. Without javascript can not do. Since the solution is usually needed quickly, using jQuery allows you to create dynamic trees, saving a decent amount of time on coding. To save yourself a lot of time, we go to a search engine and look for a suitable solution. In general, the creation of a tree on the site is often limited to this, but there are situations when the tree is suitable, but does not have some small chip, and there is nothing left to do except modify the existing tree.
Today we have two trees on the preparation table: Treeview and jQuery File Tree .
For Treeview, you need to add new nodes to the tree correctly. On the one hand, it may seem like a strange task, because the tree has the ability to add new nodes through the add selector. Like this:
')
But this approach has a flaw, a node can be added either to the end of the tree, or only in a strictly specific subassembly. But to make the new node added to the selected subnode was apparently not easy to make, because it did not provide a search for positive results other than those described in the documentation.
Therefore, we apply the method of external intervention in the behavior of the tree:
The key point of the intervention is appendTo (“li.selector ul: first”) . We added a selector class to mark the currently selected node, and now we can find it and add new nodes.
The second tree is intended to display the file system structure. But he has one small drawback. If you disable the display of files in the connector, leave only the directories, you can not view the contents of the horse folder.
To solve this problem, you need to change the tree itself, for one to correct a small error that is present in the original script.
Let's get started Let's go to the jqueryFileTree.js tree script and after setting the default values ​​for the tree options, add the line:
Below, in the iterator function, we will correct the transfer of parameters in the POST request, adding the missing root parameter (now the connector will not swear at the missing variable), in the current version we make this parameter as an empty string, since He participates in the formation of paths in the connector. And finally, add the parameter regulating the addition of the root node to the tree - showroot.
After the function, we reset the parameter of adding the root node to the tree so that it does not appear in the subnodes.
The final touch is to change the connector.
Thus, we have a root directory, from which the others are already visible as tree nodes.
UPD:
Demo of working with trees can be found here .
The simplest option to display the tree structure in HTML is lists. But we are interested in trees with dynamic properties. Without javascript can not do. Since the solution is usually needed quickly, using jQuery allows you to create dynamic trees, saving a decent amount of time on coding. To save yourself a lot of time, we go to a search engine and look for a suitable solution. In general, the creation of a tree on the site is often limited to this, but there are situations when the tree is suitable, but does not have some small chip, and there is nothing left to do except modify the existing tree.
Today we have two trees on the preparation table: Treeview and jQuery File Tree .
For Treeview, you need to add new nodes to the tree correctly. On the one hand, it may seem like a strange task, because the tree has the ability to add new nodes through the add selector. Like this:
')
var tree = $( ".selector" ).treeview();
$( ".button" ).click( function () {
var newSublist = $( "<li><span class='folder'>New Sublist</span><ul>" +
"<li><span class='file'>Item1</span></li>" +
"<li><span class='file'>Item2</span></li></ul></li>" ).appendTo(tree);
tree.treeview({
add: newSublist
});
});
But this approach has a flaw, a node can be added either to the end of the tree, or only in a strictly specific subassembly. But to make the new node added to the selected subnode was apparently not easy to make, because it did not provide a search for positive results other than those described in the documentation.
Therefore, we apply the method of external intervention in the behavior of the tree:
$( function () {
var pervios_node; //
$( "#browser" ).treeview({
toggle: function () { //
$( this ).addClass( "selector" ); //
// ( )
if (pervios_node!=undefined && pervios_node!= this ) {
//
$(pervios_node).removeClass( "selector" );
};
pervios_node= this ;
}
});
$( "#add" ).click( function () {
//
var branches = $( "<li><span class='folder'>New Sublist</span><ul><li><span class='file'>Item2</span></li></ul></li>" ).appendTo( "li.selector ul:first" );
$( "#browser" ).treeview({
add: branches
});
});
});
The key point of the intervention is appendTo (“li.selector ul: first”) . We added a selector class to mark the currently selected node, and now we can find it and add new nodes.
The second tree is intended to display the file system structure. But he has one small drawback. If you disable the display of files in the connector, leave only the directories, you can not view the contents of the horse folder.
To solve this problem, you need to change the tree itself, for one to correct a small error that is present in the original script.
Let's get started Let's go to the jqueryFileTree.js tree script and after setting the default values ​​for the tree options, add the line:
var show_root=1; //true
Below, in the iterator function, we will correct the transfer of parameters in the POST request, adding the missing root parameter (now the connector will not swear at the missing variable), in the current version we make this parameter as an empty string, since He participates in the formation of paths in the connector. And finally, add the parameter regulating the addition of the root node to the tree - showroot.
$.post(o.script, { dir: t, root: '' ,showroot:show_root }, function (data) {
…
});
show_root=0; //false
After the function, we reset the parameter of adding the root node to the tree so that it does not appear in the subnodes.
The final touch is to change the connector.
$_POST[ 'dir' ] = urldecode($_POST[ 'dir' ]);
$root= urldecode($_POST[ 'root' ]);
$show_root=( bool )urldecode($_POST[ 'showroot' ]);
if ( file_exists($root . $_POST[ 'dir' ]) ) {
$files = scandir($root . $_POST[ 'dir' ]);
natcasesort($files);
if ( count($files) > 2 ) { /* The 2 accounts for . and .. */
echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">" ;
//
if ($show_root)
{
echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST[ 'dir' ] . "." ) . "/\">root</a></li>" ;
}
else
{
// All dirs
foreach ( $files as $file ) {
if ( file_exists($root . $_POST[ 'dir' ] . $file) &&
$file != '.' &&
$file != '..' &&
is_dir($root . $_POST[ 'dir' ] . $file) ) {
echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST[ 'dir' ] . $file) . "/\">" . htmlentities($file) . "</a></li>" ;
}
}
// All files
}
echo "</ul>" ;
}
}
Thus, we have a root directory, from which the others are already visible as tree nodes.
UPD:
Demo of working with trees can be found here .
Source: https://habr.com/ru/post/127487/
All Articles