SSM框架下對(duì)信息執(zhí)行修改操作時(shí)的信息彈窗回顯以及對(duì)信息修改后的同步問題

• 概括
• • 主要說一下前端的實(shí)現(xiàn)

概括

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

主要說一下前端的實(shí)現(xiàn)

注意，這個(gè)功能整體是在正常做數(shù)據(jù)顯示的頁(yè)面中做的。在body中定義一個(gè)div，將其style中的display屬性設(shè)置為none，這樣來使得當(dāng)頁(yè)面從其他頁(yè)面跳轉(zhuǎn)到此頁(yè)面時(shí)，不讓這個(gè)div的內(nèi)容顯示出來，而點(diǎn)擊修改按鈕后在調(diào)用這個(gè)div。在這個(gè)div的form中，有三個(gè)輸入框，之前使用id屬性來定義他們的名稱，就一直做不到信息回顯。查找資料后，發(fā)現(xiàn)也可以用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">權(quán)限管理員</option><option value="facility_admin">設(shè)備管理員</option><option value="repair_admin">檢修管理員</option></select></div></div></form> </div> </form> </div>

然后在修改按鈕的觸發(fā)函數(shù)中，在layer.open 中使用content將上面的div以插入到彈出框中，這時(shí)并沒有實(shí)現(xiàn)回顯，需要再在layer.open之外，且要在它的后面加上
$(".uname").eq(1).val(uname);
$(".id").eq(1).val(id);
$(".role").eq(1).val(role);

每一行的$中的參數(shù)是剛剛使用class來定義的數(shù)據(jù)框的名字，eq中的參數(shù)是指明數(shù)據(jù)開源于當(dāng)前頁(yè)面，val中的參數(shù)是點(diǎn)擊修改按鈕觸發(fā)修改函數(shù)時(shí)向函數(shù)中傳入的參數(shù)。見下圖

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("請(qǐng)求服務(wù)器失敗!");}});},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;}

這樣便實(shí)現(xiàn)了信息回顯，即使在數(shù)據(jù)框中內(nèi)容更改之后，在ajax中也能獲取到最新的值，然后在傳送給后端，后端就不在寫了，實(shí)現(xiàn)的效果如下。

有個(gè)毛病，就是角色下拉框中的內(nèi)容不能隨著所點(diǎn)的修改按鈕的欄目的不同而同步，剛使用這種方式做完時(shí)是可以的，但是后來對(duì)其他地方一改動(dòng)后又不行了，等解決后再發(fā)出。
就分享到這，畢竟剛開始學(xué)ssm，將這個(gè)功能的實(shí)現(xiàn)過程分享出來也是為了自己以后再用時(shí)不至于無處可查，有錯(cuò)誤之處還請(qǐng)各位批評(píng)指正。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。