How to design complex layout for webpage using jQuery EasyUI ?

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.

In this article, we will learn to design the basic and complex layout for any webpage using jQuery EasyUI plugin.

Downloads for EasyUI for jQuery:

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

Note: Please take care of proper file paths while implementing the following codes.

Example 1: The following example demonstrates the basic layout design for students data using jQuery EasyUI framework. The students data is in the form of JSON.

HTML

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, 
            maximum-scale=1.0, user-scalable=no">

    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">

    <link rel="stylesheet" type="text/css" 
        href="demo.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  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
</head>

<body>
    <h2>
        jQuery EasyUI basic layout with 
        all direction regions
    </h2>

    <!-- easyui-layout class is used -->
    <div class="easyui-layout" style
            ="width:700px;height:350px;">

        <div data-options="region:'north'" 
            style="height:50px"></div>

        <!-- Set split to "true" for separate region-->
        <div data-options="region:'south',split:true"
            style="height:50px;">
        </div>
        
        <div data-options="region:'east',split:true" 
            title="East" style="width:100px;">
        </div>

        <div data-options="region:'west',split:true" 
            title="West" style="width:100px;">
        </div>

        <div data-options="region:'center',title:'EasyUI 
            layout for student data',iconCls:'icon-ok'">

            <!-- easyui-datagrid class is used for 
                    tabular data-->
            <table class="easyui-datagrid" data-options=
                "url:'datafile.json',method:'get',border:false,
                singleSelect:true,fit:true,fitColumns:true">

                <thead>
                    <tr>
                        <th data-options="field:'studentid'"
                            width="80">Student ID
                        </th>
                        
                        <th data-options="field:'studentname'"
                            width="100">Name</th>
                        
                        <th data-options="field:'marksscored',
                            align:'right'" width="80">
                            Marks
                        </th>
                        
                        <th data-options="field:'age',align:'right'"
                            width="80">Age
                        </th>
                        
                        <th data-options="field:'gender',
                            align:'center'" width="60">
                            Gender
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</body>

</html>

datafile.json: The following is the content for the “datafile.json” file used in the above code.

{
    "total": 10,
    "rows": [
        { 
            "studentname": "Komal", "age": 10, "gender": "F", 
            "marksscored": 365, "studentid": "ST-1" 
        },
        { 
            "studentname": "Dalton", "age": 12, "gender": "M",
            "marksscored": 185, "studentid": "ST-10" 
        },
        
        { 
            "studentname": "Rakesh", "age": 12, "gender": "M",
            "marksscored": 385, "studentid": "ST-11" 
        },
        
        { 
            "studentname": "Ram", "age": 12, "gender": "M",
            "marksscored": 265, "studentid": "ST-12" 
        },
        
        { 
            "selected": true, "studentname": "Ila", "age": 12,
            "gender": "F", "marksscored": 355, "studentid": "ST-13"
        },
        
        { 
            "studentname": "Manika", "age": 12, "gender": "F",
            "marksscored": 158, "studentid": "ST-14" 
        },
        
        { 
            "studentname": "Madhavi", "age": 12, "gender": "F",
            "marksscored": 456, "studentid": "ST-15" 
        },
        
        { 
            "studentname": "Preity", "age": 12, "gender": "M",
            "marksscored": 235, "studentid": "ST-16" 
        },
        
        { 
            "studentname": "Parul", "age": 12, "gender": "F",
            "marksscored": 564, "studentid": "ST-17" 
        },
        
        { 
            "studentname": "Amar", "age": 19, "gender": "F",
            "marksscored": 638, "studentid": "ST-18" 
        }
    ]
}

Output:

Before execute:

After execute:

Example 2: The following example demonstrates the design for a complex layout for any webpage using the jQuery EasyUI framework. The following code uses "htmlContent.html", "dataTree.json" and "datafile.json" files used for data retrieval. Refer tree structure for 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">

    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
            href="themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" 
            href="demo.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  -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
</head>

<body>
    <h2>jQuery EasyUI complex layout design</h2>

    <!-- easyui-layout class is used-->
    <div class="easyui-layout" style=
            "width:700px;height:350px;">

        <div data-options="region:'north'"
            style="height:50px">
        </div>
        
        <!-- set split data-option to "true" 
                for separate region-->
        <div data-options="region:'south',split:true"
            style="height:50px;">
        </div>
        
        <div data-options="region:'east',split:true"
            title="Right" style="width:180px;">

            <!-- easyui-tree class is used for 
                file tree structure -->
            <ul class="easyui-tree" data-options=
                "url:'dataTree.json',method:'get',
                animate:true,dnd:true">
            </ul>
        </div>

        <div data-options="region:'west',split:true"
            title="Left" style="width:100px;">

            <!-- easyui-accordion class is used 
                for toggled menu-->
            <div class="easyui-accordion" 
                data-options="fit:true,border:false">
                
                <div title="Algorithms" style="padding:10px;">
                    Algorithms
                </div>
                
                <div title="Python" data-options="selected:true"
                    style="padding:10px;">
                    Python
                </div>
                
                <div title="Perl" style="padding:10px">
                    Perl
                </div>
            </div>
        </div>
        <div data-options="region:'center',
                title:'Complex layout'">

            <div class="easyui-tabs" data-options=
                "fit:true,border:false,plain:true">
            
                <div title="About" data-options=
                    "href:'htmlContent.html'"
                    style="padding:10px">
                </div>
                
                <div title="DataGrid" style="padding:5px">
                    <table class="easyui-datagrid" 
                        data-options="url:'datafile.json',
                        method:'get',singleSelect:true,
                        fit:true,fitColumns:true">
                        
                        <thead>
                            <tr>
                                <th data-options=
                                    "field:'studentid'"
                                    width="80">
                                    Student ID
                                </th>
                                <th data-options=
                                    "field:'studentname'"
                                    width="100">
                                    Name
                                </th>
                                <th data-options=
                                    "field:'marksscored',
                                    align:'right'" width="80">
                                    Marks
                                </th>
                                <th data-options=
                                    "field:'age',align:'right'"
                                    width="80">
                                    Age
                                </th>
                                <th data-options=
                                    "field:'gender',align:'center'"
                                    width="60">
                                    Gender
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

htmlContent.html: The following is the content for the "htmlContent.html" file used in the above code.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <p style="font-size:12px">
        HTML content for Python.
    </p>

    <ul>
        <li>
            Python is a high-level, general
            -purpose and a very popular 
            programming language.
        </li>
        
        <li>
            Python programming language 
            (latest Python 3) is being 
            used in web development, 
        </li>
        
        <li>
            Machine Learning applications, 
            along with all cutting edge 
            technology in Software Industry.
        </li>
        
        <li>
            Python Programming Language is 
            very well suited for Beginners,
        </li>
        
        <li>
            also for experienced programmers 
            with other programming languages 
            like C++ and Java.
        </li>
    </ul>
</body>

</html>

dataTree.json: The following is the content for the "dataTree.json" file used in the above code.

[{
    "id":1,
    "text":"Users",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":101,
            "text":"Family"
        },{
            "id":102,
            "text":"Colleagues"
        },{
            "id":103,
            "text":"Relatives"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":131,
            "text":"Intel"
        },{
            "id":132,
            "text":"nodejs",
            "attributes":{
                "p1":"my Attribute1",
                "p2":"my Attribute2"
            }
        },{
            "id":133,
            "text":"Common files"
        },{
            "id":134,
            "text":"Mail",
            "checked":true
        }]
    },{
        "id":13,
        "text":"home.html"
    },{
        "id":14,
        "text":"tutorials.html"
    },{
        "id":15,
        "text":"jobs.html"
    }]
}]