easyui 基本布局

最新推荐文章于 2023-05-16 14:57:58 发布

小然688

最新推荐文章于 2023-05-16 14:57:58 发布

阅读量263

点赞数

文章标签： easyui javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_65089602/article/details/124596975

版权

本文介绍了EasyUI的基本使用，包括环境安装、公共页面设置和控件学习，特别是layout布局组件的使用。通过示例和API文档，阐述了EasyUI在网页开发中的优势和便捷性，同时列举了其他常见UI框架如Layui、Bootstrap等。文章还讨论了EasyUI的引入、路径处理、页面缓存设置以及基础组件如layout、accordion、tree、tabs、datagrid、pagination、dialog、messager和form的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思维导图

入门

环境安装:下载解压 5个(2个CSS[easyui.css icon.css] 3个JS[jQuery.js easyui.js CN.js])

公共页面 head.jsp ctx取绝对路径防止404

控件的使用：layout

几种方式去学控件：1.Demo 2.API离线文档属性方法事件

http://www.jeasyui.net/（中文网）
http://www.jeasyui.com/（英文版）

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

常见UI：
Layui，Bootstrap，element ui,ant design,iview

vue 前后端分离

1.什么是easyui？
easyui是一种基于jQuery的用户界面插件集合

2.easyui能带给我们什么好处？
1）easyui是个完美支持HTML5网页的完整框架
2）easyui节省网页开发的时间和规模
3）easyui很简单但功能强大

3.easyui如何使用？
pageContext.request.contextPath

3.1 引入必要的js和css样式文件
1）引入JQuery（jquery.min.js）
2）引入EasyUI（jquery.easyui.min.js）
3）引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
4）引入EasyUI的样式文件（/themes/default/easyui.css）
5）引入EasyUI的图标样式文件（/themes/icon.css）

3.2 路径问题
3.2.1 相对路径/绝对路径
3.2.2 base标签

3.3 页面缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

4.组件
分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、
DataGrid and Tree（表格和树）、Extension（扩展）
本章节主要讲述以下组件的使用：
1）layout（布局组件）
2）accordion（分类组件）
3）tree（树形组件）
4）tabs（选项卡组件）
5）datagrid和pagination（表格和分页组件）
6）dialog和messager（窗口组件）
7）form（表单组件）