### jQuery+EasyUI培训文档知识点概述
#### 一、Accordion（可折叠标签）
**Accordion**是一种用户界面元素，用于组织内容区域，使用户能够通过点击标题来展开或隐藏相关的内容块。这种组件非常适合用于需要展示多层级信息的场景，如FAQ页面、设置菜单等。
##### 实例
以下是一个简单的Accordion示例，展示了如何使用基本的HTML结构和jQuery EasyUI插件创建一个可折叠标签组件：
```html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery EasyUI Accordion</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#aa').accordion({
width: 400,
height: 200,
fit: false
});
});
</script>
</head>
<body>
<div id="aa" border="true">
<div title="Title1" icon="icon-save" style="overflow:auto; padding: 10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true" style="padding:10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
```
##### 参数
**Accordion**提供了多种参数配置，以满足不同的需求：
- **width**: 可折叠标签的宽度，默认为`auto`。
- **height**: 可折叠标签的高度，默认为`auto`。
- **fit**: 设置为`true`时，使可折叠标签自动缩放以适应父容器的大小，此时`width`和`height`参数将失效，默认为`false`。
- **border**: 是否显示边界线，默认为`true`。
**扩展**: 除了通过JavaScript初始化Accordion之外，还可以直接在HTML中添加`class="easyui-accordion"`并设置相应的样式属性，如下所示：
```html
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">
```
#### 二、DateBox（日期框）
**DateBox**是用于输入和选择日期的组件，通常用于表单中，以便用户可以方便地选择特定日期。
##### 实例
```html
<div id="db" class="easyui-datebox" style="width:200px;"></div>
<script type="text/javascript">
$('#db').datebox();
</script>
```
##### 参数
- **width**: 定义日期框的宽度。
- **editable**: 是否允许直接编辑日期文本。
- **showWeek**: 是否显示周数。
##### 事件
- **onSelect**: 当日期被选中时触发。
##### 方法
- **getValue**: 获取当前选中的日期值。
- **setValue**: 设置日期框中的日期。
#### 三、ComboBox(组合框)
**ComboBox**是一种结合了下拉列表和输入框的组件，用于选择一个或多个选项。
##### 实例
```html
<div id="cb" class="easyui-combobox" style="width:200px;"></div>
<script type="text/javascript">
$('#cb').combobox({
data: ['Option1', 'Option2', 'Option3']
});
</script>
```
##### 参数
- **data**: 绑定的数据源。
- **valueField**: 数据源中表示值的字段。
- **textField**: 数据源中表示文本的字段。
##### 事件
- **onChange**: 选项改变时触发。
##### 方法
- **getValue**: 获取当前选中的值。
- **setText**: 设置组合框的文本。
#### 四、Dialog（对话框）
**Dialog**是一种用于显示额外信息或请求用户操作的弹出式窗口。
##### 实例
```html
<div id="dlg" class="easyui-dialog" style="width:300px;height:200px;"></div>
<script type="text/javascript">
$('#dlg').dialog({
closed: true,
buttons: [{
text: '确定',
handler: function(){
$('#dlg').dialog('close');
}
}]
});
</script>
```
##### 参数
- **title**: 对话框的标题。
- **width**: 对话框的宽度。
- **height**: 对话框的高度。
##### 事件
- **onOpen**: 对话框打开时触发。
##### 方法
- **open**: 打开对话框。
- **close**: 关闭对话框。
#### 五、Messager（提示框）
**Messager**是用于显示消息的组件，例如错误、警告或确认信息。
##### 实例
```javascript
$.messager.alert('提示', '这是一条提示信息!');
```
##### 方法
- **alert**: 显示一个带有标题和内容的消息框。
- **show**: 显示消息。
- **hide**: 隐藏消息。
#### 六、NumberBox（数字框）
**NumberBox**是用于输入数值的组件，通常用于需要精确控制数值的场景。
##### 实例
```html
<div id="nb" class="easyui-numberbox" style="width:200px;"></div>
<script type="text/javascript">
$('#nb').numberbox();
</script>
```
##### 参数
- **min**: 最小值。
- **max**: 最大值。
- **precision**: 小数点后的位数。
#### 七、ValidateBox（验证框）
**ValidateBox**是一种用于输入验证的组件，可以确保输入符合特定格式或规则。
##### 实例
```html
<div id="vb" class="easyui-validatebox" data-options="required:true"></div>
<script type="text/javascript">
$('#vb').validatebox();
</script>
```
##### 参数
- **required**: 输入是否必须。
- **validType**: 验证类型。
##### 方法
- **isValid**: 检查输入是否有效。
- **reset**: 重置验证状态。
#### 八、Pagination（分页）
**Pagination**是用于实现数据分页展示的组件。
##### 实例
```html
<div id="pg" class="easyui-pagination" data-options="total:100,pageNumber:1,pageList:[5,10,20],pageSize:10"></div>
<script type="text/javascript">
$('#pg').pagination();
</script>
```
##### 参数
- **total**: 总记录数。
- **pageNumber**: 当前页码。
- **pageSize**: 每页显示的记录数。
##### 事件
- **onClickPage**: 当点击页码时触发。
#### 九、Window（窗口）
**Window**是用于创建可移动、可调整大小的窗口的组件。
##### 实例
```html
<div id="win" class="easyui-window" style="width:300px;height:200px;"></div>
<script type="text/javascript">
$('#win').window({
title: '这是一个窗口',
closed: true
});
</script>
```
##### 参数
- **title**: 窗口标题。
- **width**: 窗口宽度。
- **height**: 窗口高度。
##### 事件
- **onOpen**: 窗口打开时触发。
##### 方法
- **open**: 打开窗口。
- **close**: 关闭窗口。
#### 十、Panel（面板）
**Panel**是用于展示内容区域的组件，可以包含标题栏和边框。
##### 实例
```html
<div id="pn" class="easyui-panel" style="width:300px;height:200px;"></div>
<script type="text/javascript">
$('#pn').panel({
title: '这是一个面板'
});
</script>
```
##### 参数
- **title**: 面板标题。
- **width**: 面板宽度。
- **height**: 面板高度。
##### 事件
- **onLoad**: 面板加载完成时触发。
##### 方法
- **expand**: 展开面板。
- **collapse**: 折叠面板。
#### 十一、Tabs（标签）
**Tabs**是用于组织不同内容区块的组件，每个区块都有一个标签。
##### 实例
```html
<div id="tb" class="easyui-tabs" style="width:300px;height:200px;"></div>
<script type="text/javascript">
$('#tb').tabs({
fit: true,
tabPosition: 'top'
});
</script>
```
##### 参数
- **fit**: 内容区是否自动适应Tab面板的尺寸。
- **tabPosition**: 标签的位置。
##### 事件
- **onSelect**: 当选中某个标签时触发。
##### 方法
- **add**: 添加一个新的标签。
- **remove**: 移除一个标签。
#### 十二、Tree（树）
**Tree**是用于展示层次结构数据的组件，适合展示文件系统或组织结构。
##### 实例
```html
<ul id="tree" class="easyui-tree"></ul>
<script type="text/javascript">
$('#tree').tree({
data: [{text:'Item1', state:'closed', children:[{text:'Child1'}]}]
});
</script>
```
##### 参数
- **data**: 树形数据。
- **lines**: 是否显示线条。
##### 事件
- **onClick**: 当点击节点时触发。
##### 方法
- **expand**: 展开节点。
- **collapse**: 折叠节点。
#### 十三、Layout（布局）
**Layout**是用于布局页面的组件，可以灵活地管理页面的结构。
##### 实例
```html
<div id="layout" class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:true" style="height:100px;">North</div>
<div data-options="region:'center'">Center</div>
</div>
<script type="text/javascript">
$('#layout').layout();
</script>
```
##### 参数
- **fit**: 是否自动适应容器尺寸。
- **region**: 区域位置。
##### 方法
- **resize**: 调整布局尺寸。
#### 十四、Datagrid（数据表）
**Datagrid**是用于展示表格数据的组件，支持排序、筛选等功能。
##### 实例
```html
<table id="dg" class="easyui-datagrid" data-options="singleSelect:true,fitColumns:true,url:'data.json'">
<thead>
<tr>
<th field="name" width="100">姓名</th>
<th field="age" width="100">年龄</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$('#dg').datagrid();
</script>
```
##### 参数
- **singleSelect**: 是否只选择一行。
- **fitColumns**: 列宽是否自动适应。
- **url**: 获取数据的URL。
##### Column参数
- **field**: 字段名。
- **width**: 列宽。
##### 事件
- **onClickRow**: 当点击行时触发。
##### 方法
- **load**: 加载数据。
- **reload**: 重新加载数据。
以上便是jQuery+EasyUI中各个组件的基本使用方法及相关知识点的介绍。这些组件涵盖了Web开发中的许多常见需求，熟练掌握它们可以帮助开发者高效地构建复杂的前端应用。
