EasyUI 是一个 HTML5 框架,用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。
它有助于为交互式 Web 和移动应用程序构建功能,为开发人员节省大量时间。
在本文中,我们将学习使用 jQuery EasyUI插件为任何网页设计基本和复杂的布局。
EasyUI for jQuery 下载:
https://www.jeasyui.com/download/index.php
注意:在执行以下代码时,请注意正确的文件路径。
示例 1:以下示例演示了使用 jQuery EasyUI 框架对学生数据进行基本布局设计。学生数据采用 JSON 格式。
HTML
jQuery EasyUI basic layout with
all direction regions
Student ID
Name
Marks
Age
Gender
HTML
jQuery EasyUI complex layout design
Algorithms
Python
Perl
Student ID
Name
Marks
Age
Gender
HTML
HTML content for Python.
-
Python is a high-level, general
-purpose and a very popular
programming language.
-
Python programming language
(latest Python 3) is being
used in web development,
-
Machine Learning applications,
along with all cutting edge
technology in Software Industry.
-
Python Programming Language is
very well suited for Beginners,
-
also for experienced programmers
with other programming languages
like C++ and Java.
datafile.json:以下是上述代码中使用的“datafile.json”文件的内容。
{
"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"
}
]
}
输出:
- 执行前:
- 执行后:
示例 2:以下示例演示了使用 jQuery EasyUI 框架为任何网页设计复杂布局。以下代码使用用于数据检索的“htmlContent.html”、“dataTree.json”和“datafile.json”文件。参考文件的树结构
HTML
jQuery EasyUI complex layout design
Algorithms
Python
Perl
Student ID
Name
Marks
Age
Gender
htmlContent.html:以下是上述代码中使用的“htmlContent.html”文件的内容。
HTML
HTML content for Python.
-
Python is a high-level, general
-purpose and a very popular
programming language.
-
Python programming language
(latest Python 3) is being
used in web development,
-
Machine Learning applications,
along with all cutting edge
technology in Software Industry.
-
Python Programming Language is
very well suited for Beginners,
-
also for experienced programmers
with other programming languages
like C++ and Java.
dataTree.json:以下是上述代码中使用的“dataTree.json”文件的内容。
[{
"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"
}]
}]
输出:
- 执行前:
- 执行后: