jQuery EasyUI的使用入门

Posted 2020-08-24 koushr

jQuery EasyUI不是什么太高级的东西，就是用jQuery写了很多方法、定义了很多属性，通过调用这些方法、属性，可以达到一些特定的效果，然后我们再根据具体需求微调就好了。至少需要导入两个样式表和两个js文件：

<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/icon.css" />
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

上面是把jquery-easyui-1.5.1解压缩后的文件夹直接复制到webapp中而形成的路径，最终的路径可能根据开发时的资源配置情况而调整，但是文件是固定的，就是那几个文件，必须要导入，而且导入js文件时，必须先导入jquery文件，因为jquery.easyui.min.js文件使用jQuery的方法写的。

如果涉及到语言问题，可能还需要导入一个国际化的js文件，在jquery-easyui-1.5.1/locale中，如果想用中文，就是easyui-lang-zh_CN.js文件，想用英文，就是easyui-lang-en.js文件。

通过视频，学习了基础部分的draggable(拖动)、pagination(分页)，布局部分的panel(面板)、tabs(选项卡)、layout(布局)，菜单和按钮部分的linkbutton(按钮)、表单部分的form(表单)、窗口部分的window(窗口)、dialog(对话框窗口)、messager(消息窗口)，表格和树部分的datagrid(数据表格)、tree(树)。当然，实际开发中也可能用到其他的组件。

jQuery EasyUI用法非常简单，当用某个组件时，只需把class设为相对应的以easyui开头的值，然后通过data-options来设置属性，或者通过一些可选的方法来操作即可。看着API文档开发是最快的，不用记具体属性和方法名，记住规律就行，因为具体属性名和方法名实在是太多了。