How to create a web-based folder treeview and foldertreeview

How to create a web-based folder treeview and foldertreeview

Folder treeview Effect

This treeview is used in many scenarios in actual projects.

Since many applications are used, we can do it all over again. Although it is not comprehensive, We need to basically implement it all over again.

1. Prepare the icon materials first.

File.gif, file icon

Folder.gif, icon in the folder

Folder-closed.gif, folder closed icon

Treeview-default.gif, folding icon

Treeview-default-line.gif, folding line icon, actual resolution is 16*1776

 

2.

Treeview is based on ul li and their nesting, and uses the list to build a folder tree.

Html code

<! DOCTYPE> 
In the code, class names using css are defined based on the roles of each element, and subsequent css definitions have been prepared.
 
3.
After a list style is displayed, to change the list style to the folder tree style, you must first clear the list ul style, including the nested ul, set their padding and margin to 0px, which will be defined as needed later.
            .treeview, .treeview ul{                list-style: none;                padding: 0px;                margin: 0px;            }
 
 
4.
Set the background color of the List to white, and keep the top margin a little away from the above elements.
Set the custom padding for li to achieve the purpose of custom indent.
            .treeview ul{                background-color: white;                margin-top: 4px;            }            .treeview li{                margin:0px;                padding:3px 0px 3px 16px;            }

 
5.
The list mode is expanded.
Add the plus or minus sign icon to the span folder and use div as the icon display element. The foldarea-collapsable style is used by default to display the minus sign.
<Li> <div class = 'foldarea foldarea-collapsable'> </div> <span class = "folder-opened"> folder 1 </span> <ul> <li class = "last"> <span class = "file"> file 1-1 </span> </li> </ul> </li>
Set this div to a left floating, so that it can be an inline element with configurable width, and the folder span is in a row.
            .treeview .foldarea{                height: 16px;                width: 16px;                float: left;                margin-left: -16px;            }
Defines a foldable style and an expandable style.
The foldable style indicates that the current list is being expanded and the minus sign icon is displayed.
The expanded style is displayed. The current list is collapsed and the plus icon is displayed.
            .treeview  .foldarea-expandable{                background: url(images/treeview-default.gif) -80px -3px no-repeat;            }            .treeview .foldarea-collapsable{                background: url(images/treeview-default.gif) -64px -25px no-repeat;            }

 
6.
Add the folder icon before the folder text. By default, the folder opened style folder-opened is used to display the folder opened icon.
<Li> <div class = 'foldarea foldarea-collapsable'> </div> <span class = "folder-opened"> folder 1 </span> <ul> <li class = "last"> <span class = "file"> file 1-1 </span> </li> </ul> </li>
First, set the indent of the folder text to the Right to indent the custom distance, leaving space for the icon display.
            .treeview .folder{                padding: 1px 0px 1px 16px;            }
Defines the opened and closed styles for setting corresponding icons.
            .treeview .folder-opened{                background: url(images/folder.gif) 0 0 no-repeat;            }            .treeview .folder-closed{                background: url(images/folder-closed.gif) 0 0 no-repeat;            }

 
7.
Defines the file style and adds the file icon before the file text.
<Li> <div class = 'foldarea foldarea-collapsable'> </div> <span class = "folder-opened"> folder 1 </span> <ul> <li class = "last"> <span class = "file"> file 1-1 </span> </li> </ul> </li>
Indent the file text to show the display space and set the file background icon.
            .treeview .file{                background: url(images/file.gif) 0 0 no-repeat;                padding: 0px 0px 1px 16px;            }

 
8.
Set folding line background for all li list items
The upper part of the folding line background image has a right-angle slit.
            .treeview li {                background: url(images/treeview-default-line.gif) 0 0 no-repeat;            }

After the folding line is set, each final list item will drag a tail. To remove this tail, the bottom part of the folding line background image is a closed style at a right angle.
Set all the last li list items to the last style, indicating that this is the last list item.
<Ul id = "browser" class = "treeview"> <li> <div class = 'foldarea foldarea-collapsable'> </div> <span class = "folder-opened "> folder 1 </span> <ul> <li class =" last "> <span class =" file "> file 1-1 </span> </li> </ul> </li> <div class = 'foldarea foldarea-collapsable'> </div> <span class = "folder-opened"> folder 2 </ span> <ul> <li> <div class = 'foldarea foldarea-collapsable '> </div> <span class = "folder-opened"> folder 2.1 </span> <ul id = ""> <li> <span class = "file"> files 2.1-1 </span> </li> <li class = "last"> <span class = "file"> Object 2.1-2 </span> </li> </ul> </li> <li class = "last"> <span class = "file "> file 2-1 </span> </li> </ul> </li> <div class = 'foldarea foldarea-collapsable'> </div> <span class = "folder-opened"> folder 3 </span> <ul> <li class = "last"> <span class = "file"> file 3-1 </span> </li> </ul> </li> <li class = "last"> <span class = "file"> file 0-1 </span> </li> </ul>
The key point of the last style is to position the visible part of the folding line to the bottom right corner through the background-position, so that the folding line is closed in effect.
            .treeview li.last {                background-position: 0 -1766px;            }

 
9.
Finally, we need to change the text color and mouse pointer after moving the mouse over the folder.
Define the hover style first.
            .hover{                cursor: pointer;                color: red;            }
Find all the folder spans, respond to the hover event, dynamically add and delete the mouse to enter the style, and achieve the dynamic effect.
In addition, in response to the Click Event of the folder span and the plus/minus div, click to collapse the list under it when you expand it, and click to expand it when you fold it. Fold and expand are controlled by display: none style.
Then, the chart is displayed based on the collapsed or expanded Status Control icon.
$ (Document ). ready (function () {var folders = $ ('. folder '); var foldareas = $ ('. foldarea '); // move the mouse over the folder node. The Node text changes color and the mouse pointer changes folders. hover (function () {$ (this ). addClass ('hover ');}, function () {$ (this ). removeClass ('hover ');}); var doFold = function () {var ul = $ ('ul', this. parentNode) [0]; var foldarea = $ ('. foldarea ', this. parentNode) [0]; var folder = $ ('. folder ', this. parentNode) [0]; if (! Ul) {return;} var ulDisplay = detail (ul).css ('display'); if (ulDisplay = 'None') {// expand the list detail (ul).css ('display ', 'block'); // display the folder icon when expanding $ (folder ). removeClass ('Folder-closed '); $ (folder ). addClass ('Folder-opened'); // The folding icon is displayed when it is expanded $ (foldarea ). removeClass ('foldarea-expandable'); $ (foldarea ). addClass ('foldarea-collapsable');} else {// hide to hide the list (ul).css ('display', 'None '); // display the folder icon for folding $ (folder ). removeClass ('Folder-opened'); $ (folder ). addClass ('Folder-closed '); // The expanded icon is displayed when it is folded $ (foldarea ). removeClass ('foldarea-collapsable'); $ (foldarea ). addClass ('foldarea-expandable') ;}}; // fold or expand the list under the folder node. click (doFold); foldareas. click (doFold );});

 
So far, the basic implementation of treeview has been completed.
To complete the overall function, You Need To encapsulate all the functions of the treeview.
 
Code: Stamp