jQuery EasyUI 窗口 - 创建对话框
jQuery EasyUI 窗口 - 创建对话框
概述
jQuery EasyUI 是一款基于 jQuery 的 UI 插件集合，其中包括了窗口相关的插件，如对话框、模态窗口等。本文将详细介绍如何使用 EasyUI 创建对话框。
创建对话框
EasyUI 提供了两种方式创建对话框，一种是使用 HTML 标签，另一种是使用 JavaScript。
使用 HTML 标签
在 HTML 页面中添加如下代码：
<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;">
<form id="fm" method="post">
<div class="fitem">
<label>名称:</label>
<input name="name" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>邮箱:</label>
<input name="email" class="easyui-textbox" validType="email">
</div>
</form>
<div class="dialog-button">
<a href="#" class="easyui-linkbutton" onclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
</div>
其中，id="dlg" 定义了对话框的 ID，它会在 JavaScript 中使用到。class="easyui-dialog" 表示这是一个 EasyUI 的对话框组件，style 属性定义了对话框的宽度、高度、内边距等样式。<form> 元素中是对话框要展示的内容，name 属性为 name 和 email 输入框定义了一个唯一的名称。<div class="dialog-button"> 定义了对话框下方的按钮，使用 EasyUI 提供的 easyui-linkbutton 实现了按钮样式。
在 JavaScript 中，使用如下代码打开对话框：
$('#dlg').dialog({
title: '添加用户',
modal: true
});
其中，$('#dlg') 表示获取 ID 为 dlg 的元素，dialog() 方法会初始化 EasyUI 对话框，并接收一个 JSON 对象作为参数，其中 title 表示对话框标题，modal 表示是否启用模态框，即禁止操作对话框之外的内容。
使用 JavaScript
使用 JavaScript 方式创建对话框，代码如下：
$('<div/>').dialog({
href: '/user/addUser.html',
title: '添加用户',
width: 400,
height: 200,
modal: true,
buttons: [{
text: '保存',
handler: function() {
$('#fm').form('submit', {
url: '/user/addUser',
onSubmit: function() {
return $(this).form('validate');
},
success: function(result) {
var data = $.parseJSON(result);
if (data.success) {
$('#dlg').dialog('close');
$('#dg').datagrid('reload');
} else {
$.messager.alert('Error', data.msg, 'error');
}
}
});
}
}, {
text: '取消',
handler: function() {
$('#dlg').dialog('close');
}
}]
});
在代码中，首先创建一个 <div> 元素，使用 dialog() 方法初始化 EasyUI 对话框。其中，href 属性定义了对话框的内容页面 URL，title 属性定义了对话框标题，width 和 height 定义了对话框宽度和高度。buttons 是一个数组，定义了对话框下方的按钮，使用 handler 属性定义按钮被点击时的处理函数。
在对话框中，使用 <form id="fm" method="post"> 创建了一个表单，使用 $('#fm').form('submit', ...) 函数在表单提交时向服务器发送数据，onSubmit 函数在提交前进行表单验证。success 函数接收服务器返回的数据，使用 $.parseJSON() 解析 JSON 数据，根据返回值执行相应操作。
总结
本文主要介绍了如何使用 EasyUI 的对话框组件创建对话框，包括使用 HTML 标签和 JavaScript 两种方式，其中，HTML 标签方式简单易用，JavaScript 方式更为灵活，可以根据需要对对话框进行更详细的设置。熟练掌握 EasyUI 提供的窗口组件，可以大大提高 Web 开发效率。