EasyUI-初级使用

最新推荐文章于 2024-03-18 21:27:40 发布

liupq66

最新推荐文章于 2024-03-18 21:27:40 发布

阅读量444

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/liupq66/article/details/46988949

版权

EasyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

EasyUI是一个强大的jQuery的UI插件集合，提供了丰富的功能，使开发者不必写过多的css样式文件和javascript，就能创建良好的UI界面，大大节省了开发时间。除了良好的界面外，还为开发者提供了强大的数据处理功能，通过jQuery的Ajax方法获取后台的数据后，返回到页面显示，可以通过EasyUI提供的插件来获取，比如datagrid，（具体使用方法后面会有专题讲述）。如果不使用EasyUI，当我们从后台获取到数据后，以前一般是用一个table显示出来，然后为了让table好看点，还得为table添加css样式，很麻烦。而使用EasyUI框架后，只需要在datagrid插件中设置所需的属性即可，非常的方便快捷。总而言之，使用EasyUI好处多多，我就不详细列举了。

使用EasyUI需要一些依赖的文件

(注：这是jQuery的版本，必须在easyui的js文件前导入，版本最好不要低于1.7,具体最好根据easyui的版本而定)

导入以上的文件后，就可以使用EasyUI了，下面创建一个layout的例子

新建一张网页layout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

将<body></body>改为

这样就能轻松方便的将页面分成5个部分，

当然，如果你不想把页面分成5个部分的话，随便把哪个面板去掉就行（除了center这个面板）。

而且除了center外，其他面板都是可以折叠的，EasyUI也为我们提供了许多小图标，可以很方便的使用<div data-options="region:'center',iconCls:'icon-reload',title:'center title'" style="padding: 5px;background: #E2E2E2;"></div>，这样就能为center这个面板添加小图标

是不是很方便。面板还可以嵌套

使开发者能够轻松的创建复杂的页面。真的是太爽了。