jsp中利用Jquery和LayUI点击按钮弹出修改用户信息的模态框有数据
时间: 2024-03-18 20:41:20 浏览: 68
基于layui点击按钮弹出包含表单的窗口
5星 · 资源好评率100%
好的,您可以参考以下代码实现:
1. HTML页面
```html
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="0" title="男" checked>
<input type="radio" name="sex" value="1" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-inline">
<input type="text" name="age" id="age" lay-verify="number" placeholder="请输入年龄" autocomplete="off" class="layui-input">
</div>
</div>
```
2. Jquery代码
```javascript
// 点击编辑按钮,弹出模态框
$('#editBtn').click(function () {
// 假设已经获取到了用户信息
var userInfo = {
username: '张三',
sex: 1,
age: 18
};
// 将用户信息填充到模态框中
$('#username').val(userInfo.username);
$('input[name="sex"][value="' + userInfo.sex + '"]').prop('checked', true);
$('#age').val(userInfo.age);
// 弹出模态框
layer.open({
type: 1,
title: '修改用户信息',
content: $('#editModal'),
area: ['500px', '300px'],
btn: ['保存', '取消'],
yes: function(index, layero) {
// 点击保存按钮后的操作
// 获取表单数据
var formData = {
username: $('#username').val(),
sex: $('input[name="sex"]:checked').val(),
age: $('#age').val()
};
// TODO: 发送请求保存数据
// 关闭模态框
layer.close(index);
}
});
});
```
3. LayUI代码
```html
<!-- 模态框 -->
<div id="editModal" style="display:none;">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="0" title="男" checked>
<input type="radio" name="sex" value="1" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-inline">
<input type="text" name="age" id="age" lay-verify="number" placeholder="请输入年龄" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</div>
```
阅读全文