SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充

心已赠人 2023-10-18 18:35 13阅读 0赞

## 场景 ##

![Image 1][]![201905141632266.gif][]

## 实现 ##

### 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> 队列调整</button>
                    </P>
                    <table id="queueInfo_table" class="table table-striped table-bordered hover" style="width:100%">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>物流单号</th>
                            <th>仓储业务单号</th>
                            <th>送达方</th>
                            <th>单据操作类型</th>
                            <th>单据状态</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>完成时间</th>
                            <th>执行次序</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
    
            
            <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">×</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}">修改执行次序</h4>
                            <small><span th:text="${dlgSubtitle}">您可在该页修改执行次序</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>调整人：</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>调整时间：</label>
                                        <input type="text" readonly="readonly" id="finishTime" class="form-control" />
                                    </div>
                                    <div class="i-checks" id="execNumChoose"  style="display: none"><label>执行次序操作方式</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>执行次序</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>调整原因</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代码 ###

按钮点击事件

$("#QueueAdjustmentBtn").click(function () {
            var data = t.rows(['.selected']).data()[0];
            if(undefined===data){
                console.log("行选中数据isUndefined：",data);
                swal({
                    type: 'warning',
                    title: '提示:',
                    text: '请首先选择一行数据！',
                    confirmButtonColor: "#1ab394",
                })
            }else{
                queueEdit(data.id);
            }
    
        });

执行load的方法：

注：

从服务器加载数据，并将返回的HTML放入匹配的元素中。

官方文档说明：

[http://api.jquery.com/load/][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("【获取物流单数据"+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";
            }
        }

[Image 1]: 
[201905141632266.gif]: https://img-blog.csdnimg.cn/201905141632266.gif
[http_api.jquery.com_load]: http://api.jquery.com/load/