SSM框架下對信息執行修改操作時的信息彈窗回顯以及對信息修改后的同步問題

• 概括
• • 主要說一下前端的實現

概括

今天在做實訓作業時，有個對數據信息進行修改的操作，要求點擊修改按鈕后彈出修改框，欄目中需要顯示出舊的數據信息，當將輸入框中的內容修改后，點擊確認修改按鈕能夠使新信息同步到數據庫，同時包括下拉列表，然后刷新頁面。由于學藝不深，剛開始做是問題百出，花了一上午的時間才修改好，其實實現這個功能并不很難，下面給大家分享一下。

主要說一下前端的實現

注意，這個功能整體是在正常做數據顯示的頁面中做的。在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，將這個功能的實現過程分享出來也是為了自己以后再用時不至于無處可查，有錯誤之處還請各位批評指正。

總結

以上是生活随笔為你收集整理的SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后对数据库的更新问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。