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

Last Updated : 23 Jul, 2024

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>

Output:

How to design menu using jQuery EasyUI Mobile ?

geetanjali16

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?