easyUI组件

Tabs（选项卡）

创建选项卡

可以通过以下代码创建选项卡：

<div id="tt" tools="#tab-tools" class="easyui-tabs" style="width:500px;height:250px;">
			<div title="Tab1" style="padding:20px;">
				tab1
			</div>
			<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">

			</div>
			<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
				tab3
			</div>
		</div>

创建的选项卡如图所示：

让我们在面板头添加‘增加’和‘移除’两个按钮试试，代码如下：

<div id="tt" tools="#tab-tools" class="easyui-tabs" style="width:500px;height:250px;">
			<div title="Tab1" style="padding:20px;">
				Hello!
			</div>
			<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">

			</div>
			<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
				tab3
			</div>
		</div>
		<!-- 表头新增的两个按钮  -->
		<div id="tab-tools">
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
			<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
		</div>

效果如下：

接下来为两个按钮添加事件（功能分变为添加选项卡和移除选项卡），代码如下：

<script type="text/javascript">
			//添加选项卡
			function addPanel() {
				$('#tt').tabs('add', {
					title: '选项卡',
					selected: false,
					closable: true
				});
			}
			//移除选项卡
			function removePanel() {
				//获取选中的选项卡的索引
				var tab = $('#tt').tabs('getSelected');
				var index = $('#tt').tabs('getTabIndex', tab);
				$("#tt").tabs('close', index);
			}
		</script>

Messager（消息窗口）

用法

<script type="text/javascript">
			$(function() {
				$.messager.confirm('提示', '你喜欢我吗？', function(r) {
					if(r) {
						alert('我不喜欢你！');
					}else{
						alert('再见！')
					}
				});
			})
		</script>

显示效果：

Form（表单）

创建表单

我们在创建表单之前先用一下 Dialog(对话框窗口) 组件，然后在对话框中创建表单，最后在对话框底部添加两个按钮，代码如下：

<div id="employeeDialog" class="easyui-dialog" style="width: 300px; height: 300px; padding: 10px" data-options="title:'用户信息',buttons:'#bs'">
			<form id="ff" method="get" action="/xxx">
				<table cellpadding="5">
					<tr>
						<td>Name:</td>
						<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
						</td>
					</tr>
					<tr>
						<td>Email:</td>
						<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input>
						</td>
					</tr>
					<tr>
						<td>Subject:</td>
						<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input>
						</td>
					</tr>
					<tr>
						<td>Message:</td>
						<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input>
						</td>
					</tr>

				</table>
			</form>
		</div>
		<div id="bs">
			<a class="easyui-linkbutton" iconCls="icon-ok" onclick="$('#ff').submit();">提交[方式一]</a>
			<a class="easyui-linkbutton" iconCls="icon-ok" id="submitBtn">提交[方式二]</a>
		</div>

效果如下：

其中方式二提交需要添加如下代码：

<script type="text/javascript">
$(function() {
				$("#submitBtn").on('click', function() {
					$('#ff').form('submit', {
						url: '/yw',
						onSubmit: function() {
							//验证
							return true;
						},
						success: function(data) {
							alert(data)
						}
					});
				})
			})
			</script>

此外，加载数据到表单中可以分为本地加载和远程加载：

1. 本地加载：

function loadLocal() {
				$('#ff').form('load', {
					name: 'yw',
					email: 'xxx@gmail.com',
					subject: 'aohgnpwel',
					message: 'argnwepjig'
				});
			}

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadLocal()">本地加载</a>

2. 远程加载：

function loadRemote() {
				$('#ff').form('load', 'data.json');
			}

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadRemote()">远程加载</a>

DataGrid（数据表格）

创建

<table class="easyui-datagrid" title="数据表格" style="width:900px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'xxx.json',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				...
			</tr>
		</thead>
		<!--xxx.json为本地json文件-->

效果如图：

DataGrid（数据表格）

创建

可以用在后台数据管理中，虽说有点丑陋，不过拿过来就能用方便。直接上代码：

<body>
		<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
			<div data-options="region:'north',title:'上',split:true" style="height:100px;"></div>
			<div data-options="region:'south',title:'下',split:true" style="height:100px;"></div>
			<div data-options="region:'east',iconCls:'icon-reload',title:'右',split:true" style="width:100px;"></div>
			<!--<div data-options="region:'west',title:'左',split:true" style="width:100px;"></div>-->
			<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"></div>
		</div>
	</body>

<script type="text/javascript">
			$(function() {
				$('#cc').layout('add', {
					region: 'west',
					width: 120,
					title: '左',
					split: true,
					tools: [{
						iconCls: 'icon-add',
						handler: function() {
							alert('add')
						}
					}, {
						iconCls: 'icon-remove',
						handler: function() {
							alert('remove')
						}
					}]
				});
			})
		</script>

效果如下：

以上代码均搬运自 ：jQuery EasyUI 1.5 版 API 中文版
提取码：b7en