使用EasyUI框架时，需要导入3个包在项目js文件夹之中。
在项目之中，每次需先引入相关文件：
<!--引入jquery-->
<script src="../js/jquery.min.js" charset="utf-8"></script>
<!--引入easyui-->
<script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
<!--引入样式-->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
<!--导入语言包-->
<script src="../js/easyui-lang-zh_CN.js"></script>将这些文件导入项目之中后，即可使用EasyUI框架。
EasyUI中jar包文件目录
plugins:插件包，若只想使用其中的某个功能，可单独导入某一个包。
locale：语言架包 语言版本控制。
themes：样式。
Panel练习实践
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<title>layout</title>
<!--引入jquery-->
<script src="../js/jquery.min.js" charset="utf-8"></script>
<!--引入easyui-->
<script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
<!--引入样式-->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
<!--导入语言包-->
<script src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="t">
</table>
</body>
<script type="text/javascript">
$(function(){
$("#t").datagrid({
columns:[[
{
title:'编号',
field:'id',
100,
},{
title:'学生姓名',
field:'name',
200,
},{
title:'成绩',
field:'score',
100,
}
]],
400,
url:'data.json',
method:'get',
pagination:true
})
})
</script>
</html>datagrid练习实践
<head>
<meta charset="UTF-8">
<title></title>
<title>layout</title>
<!--引入jquery-->
<script src="../js/jquery.min.js" charset="utf-8"></script>
<!--引入easyui-->
<script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
<!--引入样式-->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
<!--导入语言包-->
<script src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="t">
</table>
</body>
<script type="text/javascript">
$(function(){
$("#t").datagrid({
columns:[[
{
title:'编号',
field:'id',
100,
},{
title:'学生姓名',
field:'name',
200,
},{
title:'成绩',
field:'score',
100,
}
]],
400,
url:'data.json',
method:'get',
pagination:true
})
})
</script>
</html>progressbar进度条
<body>
<div id="pro">
</div>
<p id="p">
</p>
</body>
<script type="text/javascript">
$("#pro").progressbar({
400,
height:60,
value:0,
text:'{value}%',
onChange:function(n,o) {
$("#p").html('新值是：'+n+',旧值是'+o)
}
});
/*方法设置时需要单独设置*/
setInterval(function(){
$("#pro").progressbar('setValue',$("#pro").progressbar('getValue')+1);
},50);
</script>pagination分页控件
<body>
<!--使用html实现-->
<!--data-options：用于设置属性-->
<!--<div class="easyui-pagination" data-options="total:200,pageSize:10" style="background-color: grey">-->
<!---->
<div id="page">
</div>
</div>
</body>
<script type="text/javascript">
$("#page").pagination()({
total:100,
pageSize:5,
pageList:[5,10,15,20,25]
});
</script>layout
<body class="easyui-layout">
<div style="background-image: url(../img1/timg.jpg); height: 200px; 1620px; background-size: 200 1620;">
</div>
<div data-options="region:'north',title:'North Title',split:true" style="height:200px;"></div>
<div data-options="region:'west',title:'West',split:true" style="200px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
<script type="text/javascript">
$(function(){
var west=$("body").layout('panel','west');
var content=$('<div id="lanmn"></div>');
content.tree({
url:'../tree/tree.json',
method:'get'
})
west.panel({
content:content
})
var north=$("body").layout('panel','north');
north.panel({
content:'<div style="background-image: url(../img1/timg.jpg); background-size: 200 1620;height: 140px; 1260px;"></div>'
})
})
</script>tree
<body>
<ul id="tree">
<li>
<span>目录1</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>b</li>
<li>c</li>
</ul>
</body>
<script type="text/javascript">
$("#tree").tree()
</script>动态tree
<body>
<ul id="tree">
</ul>
<input type="button" id="b" value="刷新"/>
</body>
<script>
$("#tree").tree({
url:'tree.json',
lines:true,
dnd:true
});
$("#b").click(function(){
$("#tree").tree('loadData',[{
"id": 2,
"text": "Node 2",
"state": "closed"}]
);
})
</script>