How to design complex layout for webpage using jQuery EasyUI ?

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. 

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 

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

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"
    }]
}]

Output:

• Before execute:

• After execute: