"TreeView" Simple tree plug-in based on jquery

"TreeView"

：

A few days ago to the background of the directory structure through the tree-shaped plug-in method to reflect the front-end, in the online search for half a day only found this TreeView, although not very good-looking, but still enough. Using the TreeView is a prerequisite for jquery.treeview.js, jquery.treeview.css, and some static files. These can be downloaded through the Internet Jquery-treeview this package, unzip and put into our own project under the appropriate directory. Be aware that you must copy the entire directory, because there are still a lot of static pictures to use in the TreeView and so on. Then we refer to the above two files separately on our HTML page.

Also note that the TreeView requires jquery support, so don't forget to refer to jquery.js before referencing jquery.treeview.js with the <script> tag

After that we can do a static TreeView plugin writing, the basic HTML structure is as follows:

<ulclass= "Filetree"ID= "Treetest">  <Li><spanclass= "folder">First Level Directory</span>    <ul>        <Li><spanclass= "File">Files in the first level directory</span></Li>        <Li><spanclass= "folder">Second Level directory</span>            <ul>                <Li><spanclass= "File">Files in the second level directory</span></Li>            </ul>        </Li>        <Li><spanclass= "folder">Second level two table of contents</span>        </Li>    </ul>  </Li></ul><Script>    $("ul#treetest"). TreeView ();</Script>

A few classes are basically the TreeView file definition, the outermost UL ID is my own definition, because the light after the HTML interface has not been completed must manually call the TreeView method in JS to initialize the entire file tree. In addition, some of the files referenced in jquery and the TreeView are not written here.

What's done is this:

The TreeView plugin says so much about it, but it's hard to turn a directory into the HTML structure above. I use a python to write a small way to combine the JINJA2 template language, a directory name directly into the above HTML structure, for reference.

Python function (converts a directory name to a serialized JSON-formatted data):

defDir_to_json (Root): Simple_root= Root.rsplit (os.sep,1) [1]    if  notOs.path.isdir (Root):RaiseException ('%s is not a directory'%root) Res={simple_root:[]} forSubinchlis (Root): Sub= Sub.decode ('GBK')        ifOs.path.isfile (Join (root,sub)): Res.get (Simple_root). Append (sub)elifOs.path.isdir (Join (root,sub)): Res.get (Simple_root). Append (Dir_to_json (Join (root,sub) ))returnRes

A simple description of the structure of the output, starting from the root directory is a dictionary structure, where key is the directory name, value is a list. The list is the file name that is directly in the directory. Subdirectories are also a dictionary structure when the subdirectories that belong to the directory exist. A nested structure like this. The JSON data for such a structure is then passed to the JINJA2 template:

{% macro render (root)%} {% for rootname,subitems in Root.iteritems ()%}<Li><spanclass= "folder">{{Rootname}}</span>                <ul>{% for subitem in subitems%} {% If isn't subitem is string%}                        {{render (subitem)}} {% Else%}<Li><spanclass= "File">{{Subitem}}</span></Li>{% endif%} {% endfor%}</ul>            </Li>{% endfor%} {% Endmacro%}<ulclass= "Filetree"ID= "Packinfo">{{render (Packinfo)}}</ul>

Use recursive methods to generate the file tree. One drawback to the resulting file tree is that all directories are open. It can be a bit ugly if you have a lot of layers in the nested directory.

"TreeView" Simple tree plug-in based on jquery