How to design tree structure for files using jQuery EasyUI Mobile ?

Last Updated : 25 Nov, 2020

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and, Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Download all the required pre-compiled files from the official website and save it in your working folder. Please take care of file paths during code implementation.

Official website for jQuery EasyUI:

https://www.jeasyui.com/download/index.php

Example 1:The following example demonstrates the basic tree-like structure for files or directory in mobiles using jQuery EasyUI framework. In the “ul” tag, the class which is used is easyui-tree to give a tree-like feel for the files.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0,  
        maximum-scale=1.0, user-scalable=no"> 
  
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css"> 
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css"> 
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css"> 
          
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 
    <!--jQuery libraries of EasyUI and EasyUI Mobile -->
    <script type="text/javascript" src="jquery.easyui.min.js"> 
    </script> 
    <script type="text/javascript" src="jquery.easyui.mobile.js"> 
    </script> 
</head> 
  
<body> 
    <div class="easyui-navpanel" style="padding:10px"> 
        <header> 
            <!--class styles are in mobile.css  -->
            <div class="m-toolbar"> 
                <div class="m-title">File structure</div> 
            </div> 
        </header> 
        <ul class="easyui-tree" data-options="animate:true"> 
            <li> 
                <span>My Documents</span> 
                <ul> 
                    <li data-options="state:'closed'"> 
                        <span>Photos</span> 
                        <ul> 
                            <li> 
                                <span>Official</span> 
                            </li> 
                            <li> 
                                <span>Trips</span> 
                            </li> 
                            <li> 
                                <span>FamilynFriends</span> 
                            </li> 
                        </ul> 
                        <span>Files</span> 
                        <ul> 
                            <li><span>Personal</span></li> 
                            <li><span>Official</span></li> 
                        </ul> 
                    </li> 
                    <li> 
                        <span>Program Files</span> 
                        <ul> 
                            <li>PHP</li> 
                            <li>JavaScript</li> 
                            <li>MySQL</li> 
                            <li>Tutorials</li> 
                        </ul> 
                    </li> 
                    <li>home.html</li> 
                    <li>about.html</li> 
                    <li>contact.html</li> 
                    <li>welcome.html</li> 
                </ul> 
            </li> 
        </ul> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: The following example demonstrates the “drag and drop” feature of file nodes in the tree using jQuery EasyUI framework.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
        content="initial-scale=1.0,  
        maximum-scale=1.0, user-scalable=no"> 
      
    <link rel="stylesheet" type="text/css" 
          href="themes/metro/easyui.css"> 
    <link rel="stylesheet" type="text/css" 
          href="themes/mobile.css">     
    <link rel="stylesheet" type="text/css" 
           href="themes/icon.css"> 
      
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 
    <script type="text/javascript" 
       src="jquery.easyui.min.js"> 
    </script> 
    <script type="text/javascript" 
         src="jquery.easyui.mobile.js"> 
    </script> 
</head> 
<body> 
   <h2> 
      Drag Drop Tree Nodes using jQuery EasyUI Mobile  
    </h2> 
    <div class="easyui-navpanel" style="padding:10px"> 
        <header> 
          <!--styles are in mobile.css -->
            <div class="m-toolbar"> 
                <div class="m-title">Drag/Drop Tree Nodes</div> 
            </div> 
        </header> 
          <!--DragnDrop is enable to "true" in data-options -->
        <ul class="easyui-tree" 
            data-options="animate:true,dnd:true"> 
            <li> 
                <span>My Documents</span> 
                <ul> 
                    <li data-options="state:'closed'"> 
                        <span>Photos</span> 
                        <ul> 
                            <li> 
                                <span>Official</span> 
                            </li> 
                            <li> 
                                <span>Trips</span> 
                            </li> 
                            <li> 
                                <span>FamilynFriends</span> 
                            </li> 
                        </ul> 
                        <span>Files</span> 
                        <ul> 
                          <li><span>Personal</span></li> 
                          <li><span>Official</span></li> 
                        </ul> 
                    </li> 
                    <li> 
                        <span>Program Files</span> 
                        <ul> 
                            <li>PHP</li> 
                            <li>JavaScript</li> 
                            <li>MySQL</li> 
                            <li>Tutorials</li> 
                        </ul> 
                    </li> 
                    <li>home.html</li> 
                    <li>about.html</li> 
                    <li>contact.html</li> 
                    <li>welcome.html</li> 
                </ul> 
            </li> 
        </ul> 
    </div> 
</body> 
</html>