java:前端点击邮箱配置,弹出邮箱配置弹窗,弹窗里面的输入框可以动态的增加和删除,输入邮箱后,点击保存,并可以回显配置的邮箱,通过easyui+ssm的前后端具体实现代码
时间: 2024-03-15 08:45:27 浏览: 78
JSP中使用JavaScript动态插入删除输入框实现代码
好的,以下是一个简单的实现:
前端代码(使用 EasyUI):
```html
<div>
<a href="#" class="easyui-linkbutton" onclick="addEmail()">添加邮箱</a>
<table id="emailTable" class="easyui-datagrid" style="width: 500px;">
<thead>
<tr>
<th data-options="field:'email',width:200">邮箱</th>
<th data-options="field:'operate',width:100,formatter:formatOperate">操作</th>
</tr>
</thead>
</table>
</div>
<div id="emailDialog" class="easyui-dialog" style="width: 400px; height: 250px; padding: 10px;"
closed="true" buttons="#emailDialogButtons">
<form id="emailForm" method="post">
<table>
<tr>
<td>邮箱:</td>
<td><input class="easyui-textbox" type="text" name="email" /></td>
</tr>
</table>
</form>
</div>
<div id="emailDialogButtons">
<a href="#" class="easyui-linkbutton" onclick="saveEmail()">保存</a>
<a href="#" class="easyui-linkbutton" onclick="$('#emailDialog').dialog('close')">取消</a>
</div>
<script>
var emailCount = 0;
var emailData = [];
function addEmail() {
emailCount++;
$('#emailDialog').dialog({
title: '添加邮箱',
closed: false,
modal: true
});
}
function saveEmail() {
var email = $('#emailForm input[name="email"]').val();
emailData.push({
email: email,
operate: emailCount
});
$('#emailTable').datagrid('loadData', emailData);
$('#emailDialog').dialog('close');
}
function formatOperate(value, row, index) {
return '<a href="#" onclick="deleteEmail(' + index + ')">删除</a>';
}
function deleteEmail(index) {
emailData.splice(index, 1);
$('#emailTable').datagrid('loadData', emailData);
}
</script>
```
后端代码(使用 SSM):
Controller:
```java
@Controller
@RequestMapping("/email")
public class EmailController {
@RequestMapping("/config")
public String config() {
return "email/config";
}
@RequestMapping("/save")
@ResponseBody
public Map<String, Object> save(String email) {
Map<String, Object> result = new HashMap<>();
// TODO: 保存邮箱
result.put("success", true);
return result;
}
}
```
Service:
```java
@Service
public class EmailServiceImpl implements EmailService {
@Override
public void saveEmail(String email) {
// TODO: 保存邮箱
}
}
```
Mapper:
```xml
<mapper namespace="com.example.mapper.EmailMapper">
<!-- TODO: 定义保存邮箱的 SQL 语句 -->
</mapper>
```
以上代码仅供参考,实际项目中需要根据具体情况进行调整。
阅读全文