EasyUI笔记

最新推荐文章于 2023-11-15 22:47:43 发布

七夜LaNotte

最新推荐文章于 2023-11-15 22:47:43 发布

阅读量294

点赞数

分类专栏：前端文章标签： EasyUI EasyUI使用方法 EasyUI笔记

本文链接：https://blog.csdn.net/Nanaya_AMV/article/details/100602751

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文是关于EasyUI的笔记，介绍了EasyUI是什么，它主要用于简化后台管理系统开发，提供丰富的UI组件，如窗体、表格、树和表单等。内容包括EasyUI的使用场景、步骤以及主要组件的详细说明。

摘要由CSDN通过智能技术生成

EasyUI

简介

EasyUI是什么？

EasyUI是一套前端框架。它封装jQuery、Vue等前端JS框架，另外它还提供了一套完善的UI组件，比如窗体、表单、表格、树、进度条、手风琴菜单…

EasyUI的使用场景

主要用来做一些公司内部使用的管理系统，因为它提供了丰富的组件，可以直接拿来使用，降低了后台系统开发的时间。但是它的UI不是特别美观，不建议用来做和客户交互的系统界面

使用步骤

下载EasyUI

引入EasyUI相关的JS、CSS

<head>
	<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	<script src="js/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
</head>

需要有一个HTML标签
- 比如说使用使用datagrid组件需要添加：
```
<table id="xxx"></table>
```
- 或者创建标签时一并指定样式：
```
<table id="xxx" class="easyui-datagrid"></table>
```

给标签添加相应的EasyUI样式（可选），例如：

按钮

<a class="easyui-linkbutton">EasyUI按钮</a>

窗口

<div class="easyui-window" title="EasyUI窗口"></div>

调用EasyUI相应JS方法来初始化、设置组件参数（可选）

语法

// 无参数初始化一个组件
$(selector).组件();
//比如初始化一个日期选择控件
<div id="calendar"></div>
$("#calendar").calendar();

// 有参数初始化一个组件
$(selector).组件({参数key/value形式});
// 示例参见下面的数据表格使用方法

// 调用组件的某个方法
$(selector).组件('组件的方法名');
// 例如：调用窗口的打开方法
$("#win").window('open');