本文介绍了如何使用EasyUI在网页中实现表单控件的添加与修改功能。详细讲解了添加按钮的操作，包括设置对话框属性、添加按钮事件、配置表单以及提交表单的方法。同时，还阐述了编辑功能的实现，包括复制对话框、修改表单ID和属性，以及获取选中记录进行编辑的步骤。内容涵盖EasyUI对话框、表单验证、数据提交和服务层方法等关键知识点。
添加按钮
点击添加出现一个对话框，对话框上是一个表单。
添加对话窗体
在页面的表格下添加一个面书写一个div,其中是一个对话框。为了完成自己需要的一些效果，可以为该对话框添加有一些相关属性，如果在本控件中不能找到，可以去其父进程找。为了在打开页面时不显示该对话框、不包含关闭按钮、包含折叠按钮、弹出后背后不能编辑。需要配置以下几个属性，这些属性都是window中的。
closable boolean 定义是否显示关闭按钮。
collapsible boolean 定义是否显示折叠按钮。
closed boolean 定义是否在初始化组件时关闭（隐藏）窗口
modal boolean 定义窗口是否带有遮罩效果。
属性也可以自己配，不写在自己定义的装多个属性的data-options里。
<div id="addDialog" class="easyui-dialog"
style="width: 600px; height: 600px" title="添加用户信息"
data-options="closable:false,collapsible:true,modal:true,closed:true">
</div>当点击添加按钮时弹出该对话框，为添加按钮设置一个点击事件，点击将对话框的closed属性值改为false。
为对话框中添加几个自己定义的按钮，主要是配置对话框的buttons属性，属性配置方法如下：
buttons array,selector 对话窗口底部的按钮，每个按钮的属性都跟链接按钮一样。
1) an array, each button options is same as linkbutton.
2) a selector that indicating the button bar.
按钮可以定义在一个<div>的标签内:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',buttons:'#bb',modal:true">
Dialog Content.
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton">Save</a>
<a href="#" class="easyui-linkbutton">Close</a>
</div>
该对话框按钮也可以通过数组定义:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
buttons:[{
text:'Save',
handler:function(){...}
},{
text:'Close',
handler:function(){...}
}]">
Dialog Content.
</div>
网页中给添加按钮添加的内容。
$("#addBut").click(function() {
$("#addDialog").dialog({
closed : false,
buttons : [ {
text : '保存',
iconCls : 'icon-save',
handler : function() {
}
}, {
text : '重置',
iconCls : 'icon-redo',
handler : function() {
}
}, {
text : '关闭',
iconCls : 'icon-cancel',
handler : function() {
}
} ]
})
})表单控件
在对话框的div中添加表单，表单中包含一个表格，该表格用来书写里面的布局(4行4列)，除了性别用的是可装载组合框 ，其它属相都是一个表单验证控件。根据表单的大小调整对话框的大小。
<form action="" id="form1" method="post">
<table>
<tr>
<td>用户编号</td>
<td><input type="text" class="easyui-validatebox"
name="usernumber" required="true"></td>
<td>用户名称</td>
<!--required boolean 定义该字段是否应该输入，验证属性表单字段是否必填。-->
<td><input type="text" class="easyui-validatebox"
name="username" required="true"></td>
</tr>
<tr>
<td>用户密码</td>
<td><input type="password" class="easyui-validatebox"
name="usernumber" required="true"></td>
<td>用户性别</td>
<td><select id="sex" class="easyui-combobox" name="sex"
style="width: 150px;">
<option value="0">女</option>
<option value="1">男</option>
</select></td>
</tr>
<tr>
<td>电子邮件</td>
<td><input type="password" class="easyui-validatebox"
name="usernumber" required="true"></td>
<td>联系电话</td>
<td><input type="text" class="easyui-validatebox"
name="usernumber" required="true"></td>
</tr>
<tr>
<td>住址</td>
<td><input type="password" class="easyui-validatebox"
name="usernumber" required="true"></td>
<td>备注</td>
<td><input type="text" class="easyui-validatebox"
name="usernumber" required="true"></td>
</tr>
</table>
</form>添加的时候提交表单
在添加的保存按钮中添加方法主要运用到了表单的一下方法。
submit options 执行submit动作, 这个 options参数是一个对象包含一下属性:
url: 这个提交动作的URL地址
onSubmit: 在提交之前的回调函数
success: 提交成功之后的回调函数
下面的示例展示如何提交一个合法form和避免重复提交form
$.messager.progress(); // 显示一个进度条
$('#ff').form('submit', {
url: ...,
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // 当form不合法的时候隐藏工具条
}
return isValid; // 返回false将停止form提交
},
success: function(){
$.messager.progress('close'); // 当成功提交之后隐藏进度条
}
});
load data 加载记录填充form. 这个 data 参数可以是一个string或者是一个object类型, 当是string类型的时候将请求远程服务器端数据,其他(例如:object类型)行为定义为加载本地记录.
示例代码:
$('#ff').form('load','get_data.php'); // 从URL加载
$('#ff').form('load',{//加载本地记录
name:'name2',
email:'mymail@gmail.com',
subject:'subject2',
message:'message2',
language:5
});
clear none 清空form数据
validate none 做form字段验证,返回true表示所有字段合法,这个方法使用了validatebox插件plugin
添加提交的方法，在提交之前看输入的字段是否合法，提交成功后将对话框隐藏、重新加载表格的数据、清空表单的内容，显示添加成功的消息提示框。
$("#addBut").click(function() {
$("#addDialog").dialog({
closed : false,
buttons : [ {
text : '保存',
iconCls : 'icon-save',
handler : function() {
$("#form1").form('submit',{
url:'userAction!saveUserInfo',
onSumbit:function(){
return $("#form1").form('validate');
},
success:function(flag){
if(flag){
$("#addDialog").dialog({closed:true});
$("#dg").datagrid('reload');
$("#form1").form('clear');
$.messager.show({
title : '消息提示',
msg : '添加数据成功',
timeout : 5000,
showType : 'slide'
});
}
}
})
}
}, {
text : '重置',
iconCls : 'icon-redo',
handler : function() {
$("#form1").form('clear');
}
}, {
text : '关闭',
iconCls : 'icon-cancel',
handler : function() {
}
} ]
})
})service层添加保存用户的方法
public static boolean saveUserInfo(User user){
try {
BaseDao.saveOrUpdateObj(user);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}控制层新建一个User的引用以及其对应set、get方法，书写对应的保存方法。
private User user;
public void saveUserInfo() throws Exception {
if (UserService.saveUserInfo(user)) {
toJSON(true);
} else {
toJSON(false);
}
}将前端页面中表单中控件的name属性修改为控制层引用的名称.实体类（模型）中的成员变量名（user.usernumber）一定要书写正确。
编辑
将添加对话框复制一份，修改其id为editDialog，标题为编辑用户信息，对话框中表单的id为form2，表单中控件的name属性修改为实体类（模型）中的成员变量名。
在点击修改按钮之前判断是否有记录被选中，没有被选择的记录提示选择要修改的数据，选择的记录大于1条时提示只能选择一条，这两种情况都用消息提示框为用户做出提示，当选中的内容只有一条时，通过表格的getSelected()方法获得选择记录的id，并根据该id值去后台查找到该记录将值显示到表单中，接下来的网页要书写的内容与添加纪录相似，只需要更改对应控件的id值。
$("#editBut").click(function(){
if ($("#dg").datagrid('getSelections').length == 0) {
$.messager.alert('消息提示','请选择要修改的数据','error');
}else if ($("#dg").datagrid('getSelections').length >1) {
$.messager.alert('消息提示','只能选择一条数据进行修改','error');
$("#dg").datagrid('unselectAll');
} else{
$("#form2").form('load','userAction!findUserById?fId='+$("#dg").datagrid('getSelected').id);
$("#editDialog").dialog({closed:false,
buttons : [ {
text : '保存',
iconCls : 'icon-save',
handler : function() {
$("#form2").form('submit',{
url:'userAction!updateUserInfo',
onSumbit:function(){
return $("#form2").form('validate');
},
success:function(flag){
if(flag){
$("#editDialog").dialog({closed:true});
$("#dg").datagrid('reload');
$("#form2").form('clear');
$.messager.show({
title : '消息提示',
msg : '修改数据成功',
timeout : 5000,
showType : 'slide'
});
}
}
})
}
}, {
text : '重置',
iconCls : 'icon-redo',
handler : function() {
$("#form2").form('clear');
}
}, {
text : '关闭',
iconCls : 'icon-cancel',
handler : function() {
}
} ]
});
}
})为了将id值传递到后台，需要在表单中添加一个隐藏域，其对应的值是模型中的id。
<input type="hidden" class="easyui-validatebox" name="id">在service层书写查询一条记录的方法
public static User findUserById(Integer id){
return (User) BaseDao.getObject("from User where id="+id);
}控制器层添加获取用户的方法，其中前台传来的数据获取用getRequest().getParameter(“fId”)获得参数是前台的参数名。
public void findUserById() throws Exception {
User user = UserService.findUserById(Integer.parseInt(getRequest().getParameter("fId")));
toJSON(user);
}点击保存按钮将修改的数据进行保存后台，service层书写对应的更新方法。
public static boolean updateUserInfo(User user){
try {
BaseDao.saveOrUpdateObj(user);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}控制器层更新时传递的参数是对象，该对象是一个新建的对象，因此需要在模型中添加其对应的构造方法和无参的构造方法，该对象创建时属性的获得，需要将模型中所有属性都拷贝到控制器中，并书写对应的set和get方法。
public void updateUserInfo() throws Exception {
if (UserService.saveUserInfo(new User(id, usernumber, username, password, sex, email, telPhone, address, remark))) {
toJSON(true);
} else {
toJSON(false);
}
}
扫一扫
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
