場景

實(shí)現(xiàn)

Html代碼

<div th:fragment="content"><div class="ibox float-e-margins"><div class="ibox-content"><div class="table-responsive"><P><button id="QueueAdjustmentBtn" class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 隊列調(diào)整</button></P><table id="queueInfo_table" class="table table-striped table-bordered hover" style="width:100%"><thead><tr><th>序號</th><th>物流單號</th><th>倉儲業(yè)務(wù)單號</th><th>送達(dá)方</th><th>單據(jù)操作類型</th><th>單據(jù)狀態(tài)</th><th>創(chuàng)建人</th><th>創(chuàng)建時間</th><th>完成時間</th><th>執(zhí)行次序</th></tr></thead><tbody></tbody></table></div></div><!--模態(tài)框--><div class="modal inmodal" id="apEidtModel" tabindex="-1" role="dialog"? aria-hidden="true"><div class="modal-dialog" id="apEidtDiv" th:fragment="apEidtDiv"><div class="modal-content animated fadeIn"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><i class="fa fa-plus-circle modal-icon pl-1p75"></i><h4 class="modal-title" th:text="${dlgTitle}">修改執(zhí)行次序</h4><small><span th:text="${dlgSubtitle}">您可在該頁修改執(zhí)行次序</span></small></div><form id="queueAdjustmentEdit"? role="form" action=""><div class="modal-body"><div class="form-row"><input type="hidden" class="form-control" name= "id"th:value="${queue==null || queue.busLogisticsOrder ==null?'':queue.busLogisticsOrder.id}"/><div class="form-group col-md-4"><label>調(diào)整人：</label><input type="text" readonly="readonly" id="name" class= "form-control"th:value="${queue==null || queue.user ==null?'':queue.user.name}" /></div><div class="form-group col-md-4"><label>調(diào)整時間：</label><input type="text" readonly="readonly" id="finishTime" class="form-control" /></div><div class="i-checks" id="execNumChoose"? style="display: none"><label>執(zhí)行次序操作方式</label><div class="form-group col-md-12"><label><input type="radio" value="0" name="execNumChoose" checked> <i></i> 插入 </label><label><input type="radio" value="1" name="execNumChoose" > <i></i> 置換 </label></div></div><div class="form-group col-md-6"><label>執(zhí)行次序</label><select class="form-control m-b execNum"?? name="execNum" th:onchange="'javascript:getExecNumChoose();'" th:if="${queue} ne null and ${queue.busLogisticsOrder} ne null"><option? id="thisExecNum" th:value="${queue.busLogisticsOrder.execNum}" th:if="${queue.busLogisticsOrder} ne null"><span th:text="${queue.busLogisticsOrder.execNum}"></span></option><option? th:each="sortItem,itemState:${queue.execNumList}"? th:value="${sortItem.execNum}" ><span th:text="${sortItem.execNum}"></span></option></select></div><div class="form-group col-md-12"><label>調(diào)整原因</label> <textarea? class="form-control" name="adjustmentReason"></textarea></div></div></div><div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">保存</button></div></form></div></div></div></div> </div>

jquery代碼

按鈕點(diǎn)擊事件

$("#QueueAdjustmentBtn").click(function () {var data = t.rows(['.selected']).data()[0];if(undefined===data){console.log("行選中數(shù)據(jù)isUndefined：",data);swal({type: 'warning',title: '提示:',text: '請首先選擇一行數(shù)據(jù)！',confirmButtonColor: "#1ab394",})}else{queueEdit(data.id);}});

執(zhí)行l(wèi)oad的方法：??

function queueEdit(id){var url = "/busLogisticsOrder/doGetDlgForQueueEdit.html";var data = {id:id};$('#apEidtDiv').load(url, data, function (response,status,xhr) {$('.i-checks').iCheck({checkboxClass: 'icheckbox_square-green',radioClass: 'iradio_square-green',});$("#apEidtModel").modal('show');});};

注：

從服務(wù)器加載數(shù)據(jù)，并將返回的HTML放入匹配的元素中。

官方文檔說明：

http://api.jquery.com/load/

后臺處理代碼

@RequestMapping("/doGetDlgForQueueEdit.html")public String doGetDlgForQueueEdit(String id,Model model){try{ResultDTO resultDTO=this.busLogisticsOrderService.doGetDlgForQueueEdit(id);if(!resultDTO.isStatus()) {model.addAttribute("err",resultDTO.getData());Log.getInst(this).debug("【獲取物流單數(shù)據(jù)"+id+"異常】："+resultDTO.getData());return "taskManage/queueAdjustment::apEidtDiv";}model.addAttribute("queue",resultDTO.getData());Log.getInst(this).debug("【獲取"+id+"頁面（Model）成功】");return "taskManage/queueAdjustment::apEidtDiv";}catch (Exception e){Log.getInst(this).debug("【獲取物流單"+id+"異常】：",e);return "sysHttpStatus/error.html";}}

?

總結(jié)

以上是生活随笔為你收集整理的SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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