概括

今天在做实训作业时，有个对数据信息进行修改的操作，要求点击修改按钮后弹出修改框，栏目中需要显示出旧的数据信息，当将输入框中的内容修改后，点击确认修改按钮能够使新信息同步到数据库，同时包括下拉列表，然后刷新页面。由于学艺不深，刚开始做是问题百出，花了一上午的时间才修改好，其实实现这个功能并不很难，下面给大家分享一下。

主要说一下前端的实现

注意，这个功能整体是在正常做数据显示的页面中做的。在body中定义一个div，将其style中的display属性设置为none，这样来使得当页面从其他页面跳转到此页面时，不让这个div的内容显示出来，而点击修改按钮后在调用这个div。在这个div的form中，有三个输入框，之前使用id属性来定义他们的名称，就一直做不到信息回显。查找资料后，发现也可以用class来定义名称,如下图

<div align="center" id="addRoleInfo" style="display:none;width: 300px;"><br><center><h2 >添加角色信息</h2></center><hr><form class="layui-form" id="form1"><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-inline"><input type="text" class="adduname layui-input" name="uname" lay-verify="uname" 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="text" class="addrole" name="role" lay-verify="role" autocomplete="off" class="layui-input">--><select class="addrole"  lay-verify="role" autocomplete="off"><option value="role_admin">权限管理员</option><option value="facility_admin">设备管理员</option><option value="repair_admin">检修管理员</option></select></div></div></form>
</div>
</form>
</div>

然后在修改按钮的触发函数中，在layer.open 中使用content将上面的div以插入到弹出框中，这时并没有实现回显，需要再在layer.open之外，且要在它的后面加上
$(".uname").eq(1).val(uname);
$(".id").eq(1).val(id);
$(".role").eq(1).val(role);

每一行的$中的参数是刚刚使用class来定义的数据框的名字，eq中的参数是指明数据开源于当前页面，val中的参数是点击修改按钮触发修改函数时向函数中传入的参数。见下图

function openRoleInfoEdit(id,uname,role) {layer.open({type:1,title:"修改用户信息",btn:["修改","取消"],content:$("#editRoleInfo").html(),area:['400px','380px'],yes:function (index) {$.ajax({url:"role/updateRoleInfoById.do",data:{"id":$(".id").eq(1).val(),"uname":$(".uname").eq(1).val(),"role":$(".role").eq(1).val()},method:"post",success:function () {var table=layui.table;layer.msg("修改成功！");table.reload("roleTable");layer.close(index);},error:function () {// layer.msg(data.toLocaleString());layer.msg("请求服务器失败!");}});},success: function () {layui.use("form",function () {layui.form.render();}),$("#lbl_title").html("修改用户信息");}});$(".uname").eq(1).val(uname);$(".id").eq(1).val(id);$(".role").eq(1).val(role);}

                            templet:function (row) {var edit= '<a href="javascript:openRoleInfoEdit(' + row.id+",'"+row.uname+"','"+row.role+ '\');" title="编辑">'+'<span style="font-size: 25px;color:blue" class="layui-icon layui-icon-util"></span></a>'var del= '<a href="javascript:deleteRoleInfoById('+row.id+')" title="删除">'+'<span style="font-size: 25px;color:blue" class="layui-icon layui-icon-delete"></span></a>'return edit +" "+ del;}

这样便实现了信息回显，即使在数据框中内容更改之后，在ajax中也能获取到最新的值，然后在传送给后端，后端就不在写了，实现的效果如下。
在这里插入图片描述
有个毛病，就是角色下拉框中的内容不能随着所点的修改按钮的栏目的不同而同步，刚使用这种方式做完时是可以的，但是后来对其他地方一改动后又不行了，等解决后再发出。
就分享到这，毕竟刚开始学ssm，将这个功能的实现过程分享出来也是为了自己以后再用时不至于无处可查，有错误之处还请各位批评指正。