使用場景:
今天在公司開發時,有這樣一種情況,我已經透過AJAX實現批次刪除的功能。但實現的方式是多次呼叫AJAX,每次刪除一條,刪除後,在頁面上直接再把行tr。remove掉。但這種方式浪費伺服器資源。因此現在需要改為,一次獲取所有的Id,同時一次AJAX呼叫批次刪除掉記錄。
那麼問題來了,批次刪除後如何重新整理頁面,有兩種方案:
1)AJAX呼叫後,返回成功的ID,把成功的ID對應的行,Remove掉,但這樣改變原來公司程式結構模式,所以暫時不考慮了。
2)AJAX呼叫後,返回成功後,直接再模擬點選“查詢”的功能。
先上前端程式碼:
1。在程式顯示列表的HTML標籤中,先標註後要訪問的元素。
程式碼中:
1)id=“chkSelectAll”用於全選 複選框
2)id=chkSet 用於單行的複選框
3)id=“h_unique_id”用於找到該行對應的資料庫的Id
2。在程式的JS程式碼中,我們把重要的方法拿出來說明:
1)在頂部,找到表格class名為table_style_2,td裡的checkbox控制元件,如果沒有checked,則忽略。否則就透過find方法找到id的值,並存入uniqueIds中
接著呼叫Ajax進行批次刪除。
2)如果不成功則彈出出錯資訊,如果成功,這裡呼叫伺服器控制元件生成的ID的控制,去模擬查詢點選事情。
至此,就實現了批次刪除在前端更新資料的功能。