How to design complex layout for webpage using jQuery EasyUI ?
Last Updated :
12 Feb, 2021
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 ">
< 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" >
< script type = "text/javascript"
src = "jquery.min.js" >
</ script >
< script type = "text/javascript"
src = "jquery.easyui.min.js" >
</ script >
</ head >
< body >
< h2 >
jQuery EasyUI basic layout with
all direction regions
</ h2 >
< div class = "easyui-layout" style
= "width:700px;height:350px;" >
< div data-options = "region:'north'"
style = "height:50px" ></ div >
< 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'">
< 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:
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 ">
< 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" >
< script type = "text/javascript"
src = "jquery.min.js" >
</ script >
< script type = "text/javascript"
src = "jquery.easyui.min.js" >
</ script >
</ head >
< body >
< h2 >jQuery EasyUI complex layout design</ h2 >
< div class = "easyui-layout" style =
"width:700px;height:350px;" >
< div data-options = "region:'north'"
style = "height:50px" >
</ div >
< div data-options = "region:'south',split:true"
style = "height:50px;" >
</ div >
< div data-options = "region:'east',split:true"
title = "Right" style = "width:180px;" >
< 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;" >
< 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"
}]
}]
Output:
Share your thoughts in the comments
Please Login to comment...