August 14, 2022

Windows File Explorer Is Like A Folder Tree | jQueryFileExplorer

jQueryFileExplorer is inspired by jQueryFiletree. Most of the icons in the Pictures folder are from the jquery file tree. Split.js is included and used to provide split functionality. It can be excluded if resizing the plate is not required.

JQuery plug-in to create a multi-level folder tree that represents the folder hierarchy of your file system and allows the user to browse folders and files in an interface similar to Windows File Explorer.

treeview with search jquery, jquery file tree, jquery folder browser, jquery tree view add edit delete, jquery file manager

Parameters:

  • Root: the root path passed to the back URL or job
  • rootLabel: The root label shown in File Explorer
  • Script: The URL or function that displays the folder’s content.
  • Script file: The function or download URL that is triggered when you click on a file.

How to make use of it:

1. Load the wanted jQuery and Split.js within the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/split.min.js"></script>

2. Create a container during which you need to generate the folder tree.

<div id="fileexplorer-example"></div>

3. Initialize the plugin and specify the path/label of the basis.

$("#fileexplorer-example").jQueryFileExplorer({
  root: "/",
  rootLabel:"Server",
});

4. Specify the URL (or a function) that responds with folder/file info.

$("#fileexplorer-example").jQueryFileExplorer({
  script: getPath
});

$("#fileexplorer-example").jQueryFileExplorer({
  script: "https://yoursite.com/FileExplorer/GetPath"
});

5. The information structure should look as comply with.

function getPath(data)
{
  if(data.path=='/')
  {
    return [
      {
        label: 'C:',
        path: 'C:',
        isDrive: true,
        isFolder: true,
        hasSubfolder: true,
        subitems:['Total: 300,000', 'Free: 100,000']
      },
      {
        label: 'D:',
        path: 'D:',
        isDrive: true,
        isFolder: true,
        hasSubfolder: true,
        subitems:['Total: 100,000', 'Free: 80,000']
      }
    ];
  }
  else if(data.path=='C:')
  {
    return [
      {
        label: 'Windows',
        path: 'C:/Windows',
        hasSubfolder: true,
        isFolder: true,
        subitems:['1/2/2021']
      },
      {
        label: 'Temp',
        path: 'C:/Temp',
        hasSubfolder: true,
        isFolder: true,
        lastModified: '1/1/2021'
      },
      {
        label: 'FolderWithoutSubfolder',
        path: 'C:/FolderWithoutSubfolder',
        hasSubfolder: false,
        isFolder: true,
        subitems: ['1/3/2021']
      },
      {
        label: 'File1',
        path: 'C:/File1.pdf',
        isFolder: false,
        ext: 'pdf',
        subitems: ['2/2/2021', '123,433']
      }
    ];
  }
  else if(data.path.endsWith("/FolderWithoutSubfolder"))
  {
    return [
      {
        label: 'file1.pdf',
        path: data.path+"/file1.pdf",
        ext: 'pdf',
        isFolder: false,
        subitems: ['2/2/2021', '123,234']
      },
      {
        label: 'file2.jpg',
        path: data.path+"/file2.jpg",
        ext: 'jpg',
        isFolder: false,
        subitems: ['2/2/2021', '123,234']
      }
    ];
  }
  else
  {
    return [
      {
        label: 'FolderWithSubfolder',
        path: data.path+"/FolderWithSubfolder",
        hasSubfolder: true,
        isFolder: true,
        subitems: ['1/1/2021']
      },
      {
        label: 'FolderWithoutSubfolder',
        path: data.path+"/FolderWithoutSubfolder",
        hasSubfolder: false,
        isFolder: true,
        subitems: ['1/1/2021']
      },
      {
        label: 'file1.pdf',
        path: data.path+"/file1.pdf",
        ext: 'pdf',
        isFolder: false,
        subitems: ['2/2/2021', '123,234']
      },
      {
        label: 'file2.jpg',
        path: data.path+"/file2.jpg",
        ext: 'jpg',
        isFolder: false,
        subitems: ['2/2/2021','123,234']
      }
    ];
  }
}

6. Specify a function or a URL to deal with the file when getting clicked.

$("#fileexplorer-example").jQueryFileExplorer({
  fileScript: function(file){
    window.open("https://yoursite.com/FileExplorer/GetPath?path="+file.path);
  }
});

Windows File Explorer Like Folder Tree, jQuery File Explorer Plugin/Github, jquery horizontal tree plugin free download, display folder structure in html


See Demo And Download

Official Website(edmlin): Click Here

This superior jQuery/javascript plugin is developed by edmlin. For extra Advanced Usages, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.