CREATING SIMPLE JQUERY TREE VIEW WITH DYNAMIC VALUES / Display a SharePoint Document Library as Tree View using Jquery

As i showed how to create a simple jquery tree view, now we are going to do some small modifications to achieve it dynamically.

Refer this link for previous post: Simple Jquery Tree View

Now change the design part as like below:

<div class="tree">

////Dynamic Tree Nodes

</div>

Now create the dynamic values. Here i am going to get the values from SharePoint Document Library:

<script type="text/javascript">
        var sMenuString = "";
        var rootFolders;
        var getInternalDocName = "Test_Document";

        $(document).ready(function () {
            bindTreeView();

            $('.tree li').each(function () {
                if ($(this).children('ul').length > 0) {
                    $(this).addClass('parent');
                }
            });

            $('.tree li.parent > a').click(function () {
                $(this).parent().toggleClass('active');
                $(this).parent().children('ul').slideToggle('fast');
            });
        });

        function bindTreeView() {
            try {
                var div = document.getElementById("dvTreeView");
                sMenuString = "";
                $.ajax({
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Test_Document')/items?$expand=Folder,AttachmentFiles&$select=ID,Title,EncodedAbsUrl,FileRef,FSObjType,FileLeafRef,Folder/ServerRelativeUrl&$top=500&$orderby=ID%20asc", //assuming web part is added on same site :)  
                    type: "GET",
                    headers: { "accept": "application/json;odata=verbose" },
                    async: false,
                    success: function (docsData) {
                        if (docsData.d.results.length > 0) {
                            var getValues = docsData.d.results;

                            rootFolders = $.grep(getValues, function (e) {
                                if (e.EncodedAbsUrl.split(getInternalDocName + "/")[1] != null) {
                                    return e.EncodedAbsUrl.split(getInternalDocName + "/")[1].split('/').length == 1;
                                }
                            });
                            sMenuString += "<ul>";
                            $.each(rootFolders, function (i, rootFolder) {
                                sMenuString += "<li class='parent'><a>" + rootFolder.FileLeafRef + "</a>";

                                if (rootFolder.FSObjType == 1) {
                                    sMenuString += "<ul>";
                                    SubFoldersFiles(getValues, rootFolder.FileLeafRef.replace(/ /g, '%20'), rootFolder.EncodedAbsUrl);
                                    sMenuString += "</ul>";
                                }
                                sMenuString += "</li>";
                            });

                            sMenuString += "</ul>";
                            div.innerHTML = sMenuString;

                        }
                    }
                });
            } catch (e) {
                alert(e.message);
            }
            return false;
        }

        function SubFoldersFiles(listItems, currentItem, fullUrl) {
            var items = [];
            var subItems = $.grep(listItems, function (e) {
                if (e.EncodedAbsUrl.split(fullUrl + "/").length > 1) {
                    var fileUrl = e.EncodedAbsUrl.split(fullUrl + "/")[1];
                    if (fileUrl.split("/").length == 1) {
                        return true;
                    }
                }
            });

            if (subItems.length > 0) {
                $.each(subItems, function (i, subItem) {

                    if (subItem.FSObjType == 1) {
                        sMenuString += "<li class='parent'><a>" + subItem.FileLeafRef + "</a>";
                        sMenuString += "<ul>";
                        SubFoldersFiles(listItems, subItem.FileLeafRef.replace(/ /g, '%20'), subItem.EncodedAbsUrl);
                        sMenuString += "</ul>";
                    }
                    else {
                        sMenuString += "<li><input type='checkbox' class='chkTreeView' name='TreeView' value='" + subItem.FileRef + "' onclick='docDetails(this)' /><a>" + subItem.FileLeafRef + "</a></li>";
                    }
                });
            }
        }
    </script>

This above script will help you to bind all the root folders and documents and Sub-Folders from a document library.

Once you deployed then you out put will looks like below: