The concept of the HTML code, the folder images, the files in this folder
and the script jquery-1.4.1.js have been downloaded from
https://gallery.technet.microsoft.com/scriptcenter/Tree-View-HTML-Design-in-5-5c04fd13#content
on Jan 11, 2016.

The file treeView.html is generated by excelExporter but the file
structure strictly follows the code downloaded from the location above.
The code generation implements the recipe given in the internet site, see
down here.

5 Steps to create a simple Tree View:

Step 1 : Define the nodes in UL - LI tags in the format below:

    <div class="wfm">
        <ul>
            <li>
                <div>Node 1
                </div>
                <ul>
                    <li>
                        <div>Node 1 - 1
                        </div>
                        <ul>
                            <li>
                                <div>Node 1 - 1 - 1
                                </div>
                                <ul>
                                    <li>
                                        <div>Node 1 - 1 - 1 - 1
                                        </div>
                                        <ul>
                                            <li>
                                                <div>Node 1 - 1 - 1 - 1 - 1
                                                </div>
                                            </li>
                                            <li>
                                                <div>Node 1 - 1 - 1 - 1 - 2
                                                </div>
                                            </li>
                                            <li>
                                                <div>Node 1 - 1 - 1 - 1 - 3
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div>Node 1 - 1 - 1 - 2
                                        </div>
                                    </li>
                                    <li>
                                        <div>Node 1 - 1 - 1 - 3
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
					<li>
                        <div>Node 1 - 2
                        </div>
						<ul>
                            <li>
                                <div>Node 1 - 2 - 1
                                </div>
                                <ul>
                                    <li>
                                        <div>Node 1 - 2 - 1 - 1
                                        </div>
                                        <ul>
                                            <li>
                                                <div>Node 1 - 2 - 1 - 1 - 1
                                                </div>
                                            </li>
                                            <li>
                                                <div>Node 1 - 2 - 1 - 1 - 2
                                                </div>
                                            </li>
                                            <li>
                                                <div>Node 1 - 2 - 1 - 1 - 3
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div>Node 1 - 2 - 1 - 2
                                        </div>
                                    </li>
                                    <li>
                                        <div>Node 1 - 2 - 1 - 3
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
					</li>
                </ul>
            </li>            
        </ul>
    </div>
    
Step 2 : Define the Image for tree expand/collapse and check box to select the nodes:

                <div>
                    <img alt="" class="expand" src="Images/Minus.png" />
                    <img alt="" class="collapse" src="Images/Plus.png" />
                </div>
                <div>
                    <input id="Checkbox1" type="checkbox" />
                </div>


Step 3 : Define the CSS for LI, UI and DIV:
    
    
        .wfm { width:500px }
        
        ul { list-style:none; }
    
        li { padding-top:10px }
        
        ul, li, div { float:left }
    
        ul, li { width:100% }
    
        .expand { width:15px;height:15px; }
    
        .collapse { width:15px;height:15px;display:none }
    
    
Step 4 : Define the JavaScript Scripts for Expand/Collapse and Select/Unselect:

    <script type="text/javascript" language="javascript">
        $(".expand").click(function () {
            $(this).toggle();
            $(this).next().toggle();
            $(this).parent().parent().children().last().toggle();
        });
        $(".collapse").click(function () {
            $(this).toggle();
            $(this).prev().toggle();
            $(this).parent().parent().children().last().toggle();
        });

        $("input[type='checkbox']").click(function () {
            if ($(this).attr("checked") == false) {
                $(this).parent().parent().find("input[type='checkbox']").each(function () {
                    $(this).removeAttr("checked");
                });
            }
            else {
                $(this).parent().parent().find("input[type='checkbox']").each(function () {
                    $(this).attr("checked", "checked");
                });
            }
        });
    </script>
    
Step 5 : jquery-1.4.1.js reference to HTML Page