上移下移實現邏輯
阿新 • • 發佈:2019-02-16
在開發中經常有上移、下移的操作,猛的一想感覺邏輯還很複雜,其實很簡單主要有以下步驟:
- 首先頁面上的展示列表在後臺查詢的時候要根據某個欄位排序,這樣展示的資料才是有序的,才可以實現此功能。
- 新增上移或者下移的時候需要把當前資料的ID和目標ID傳到後臺
- 後臺排序的欄位互換值,到前臺後需要重新載入列表。
前臺程式碼:
$.each(json, function(index, item) { // 迴圈獲取資料 var answertext = '答案' + (index + 1) + '. ' + json[index].answertext; var answerid = json[index].answerid; var li = $("<li value=" + json[index] + ">" + answertext + "</li>"); li.appendTo("#ul_answer"); li.append(' <a onclick="deleteAnswer(\'' + answerid + '\')">刪除</a>'); li.append(' <a onclick="updateAnswer(\'' + answerid + '\')">修改</a>'); var index = $("#ul_answer li").index(li); var nextId = null; var previousId = null; if (index < (json.length - 1)) { nextId = json[index + 1].answerid } if (index > 0) { previousId = json[index - 1].answerid; } if (json.length > 1) { if (index == 0) { li.append('<a onclick="upordown(\'' + answerid + '\',\'' + nextId + '\')">下移</a>'); } else if (index == json.length - 1) { li.append('<a onclick="upordown(\'' + answerid + '\',\'' + previousId + '\')">上移</a>'); } else { li.append('<a onclick="upordown(\'' + answerid + '\',\'' + previousId + '\')">上移</a>'); li.append('<a onclick="upordown(\'' + answerid + '\',\'' + nextId + '\')">下移</a>'); } } }); $.ajax({ type: "GET", url:'templateanswer/upordown', data:{sourcePk:answerid,targetPk:targetId}, async: false, contentType : 'application/json', dataType:"json", error: function(data) { alert(data.message); }, success: function(response) { if(response.code='0000'){ // alert('刪除成功'); init_answer(); } } });
後臺程式碼:
Demo sourceDemo = this.getDemoyPk(sourcePk); Demo targetDemo = this.getDemoByPk(targetPk); Short sourceOrder = sourceDemo.getDemoorder(); Short targetOrder = targetOrder.getDemoorder(); sourceDemo.setQuestionorder(targetOrder); targetOrder.setQuestionorder(sourceOrder); this.questionDao.updateByPrimaryKey(sourceDemo); this.questionDao.updateByPrimaryKey(targetDemo );