jEasyUI 窗口与布局学习笔记
窗口（Window）
jEasyUI 的窗口组件是一种非常常用的 UI 组件，可以用来显示弹出式对话框、模态对话框等等。其基本用法如下：
htmlCopy Code<div class="easyui-window" title="窗口标题" style="width:400px;height:200px;"
data-options="modal:true,collapsible:false,minimizable:false,maximizable:false">
窗口内容
</div>
其中，title 属性表示窗口标题，style 属性可以设置宽度和高度，data-options 属性用来设置其他选项，例如 modal 表示模态窗口、collapsible 表示是否可以折叠、minimizable 表示是否可以最小化、maximizable 表示是否可以最大化等等。
我们还可以通过 JS 代码来操作窗口，例如打开一个窗口：
javascriptCopy Code$('#win').window('open');
关闭一个窗口：
javascriptCopy Code$('#win').window('close');
移动一个窗口：
javascriptCopy Code$('#win').window('move',{
left:100,
top:150
});
布局（Layout）
jEasyUI 的布局组件可以用来划分页面区域，使得页面的布局更加灵活。其基本用法如下：
htmlCopy Code<body class="easyui-layout">
<div data-options="region:'north'" style="height:100px;background:#eee;">North Region</div>
<div data-options="region:'west',split:true" style="width:100px;background:#ccc;">West Region</div>
<div data-options="region:'center'" style="background:#fff;">Center Region</div>
</body>
其中，class 属性为 easyui-layout 表示使用布局组件，data-options 属性用来设置区域，例如 region 表示区域位置，可以设置为 north、south、west、east 或 center，split 表示是否显示分隔条。
我们还可以通过 JS 代码来操作布局，例如调整区域大小：
javascriptCopy Code$('#layout').layout('resize');
获取某个区域对象：
javascriptCopy Codevar centerRegion = $('#layout').layout('panel','center');
举例：
<!-- markdownlint-disable MD033 -->
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 窗口与布局学习笔记</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.1/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.1/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:100px;background:#eee;">North Region</div>
<div data-options="region:'west',split:true" style="width:100px;background:#ccc;">
<ul class="easyui-tree">
<li><span>1. Tree Node 1</span>
<ul>
<li><span>1.1. Tree Node 1.1</span></li>
<li><span>1.2. Tree Node 1.2</span></li>
<li><span>1.3. Tree Node 1.3</span></li>
</ul>
</li>
<li><span>2. Tree Node 2</span>
<ul>
<li><span>2.1. Tree Node 2.1</span></li>
<li><span>2.2. Tree Node 2.2</span></li>
<li><span>2.3. Tree Node 2.3</span></li>
</ul>
</li>
</ul>
</div>
<div data-options="region:'center'" style="background:#fff;">
<div class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'west',split:true" style="width:150px;background:#ccc;">
<ul class="easyui-tree">
<li><span>1. Tree Node 1</span>
<ul>
<li><span>1.1. Tree Node 1.1</span></li>
<li><span>1.2. Tree Node 1.2</span></li>
<li><span>1.3. Tree Node 1.3</span></li>
</ul>
</li>
<li><span>2. Tree Node 2</span>
<ul>
<li><span>2.1. Tree Node 2.1</span></li>
<li><span>2.2. Tree Node 2.2</span></li>
<li><span>2.3. Tree Node 2.3</span></li>
</ul>
</li>
</ul>
</div>
<div data-options="region:'center'" style="background:#fff;">
<table class="easyui-datagrid" style="width:100%;height:100%;">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product ID</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:150">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
<!-- markdownlint-restore -->
效果如图所示：
