场景

实现

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">&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}">修改执行次序</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的方法：

 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');});};

注：

从服务器加载数据，并将返回的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("【获取物流单数据"+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";}}

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

bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...
Bootstrap模态框居中显示
Bootstrap默认的模态框不是居中显示的,需要稍微修改下源代码: 1.打开源码bootstrap.js,在里面找到如下代码: 2.在上述代码段落下面增加居中的代码即可: //使弹出框居中...va ...
ssm中ajax无反应,jquery + bootstrap(模态框romote) + click - ajax + SSM插入数据库没反应...
点击产生模态框,模态框使用remote远程加载.然后在模态框输入数据,ajax传输到后台insert. 但是click动作后模态框消失,数据库没有插入,没有报错,就好像没有执行js的click一样,求 ...
ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)
项目中遇到的问题: 在elementui中表格点击按钮传值的时候,通过bus中的$emit传对象,在弹出的模态框中用bus的$on接收对象,然后对传的对象进行改变,结果发现改变了原表格的数据. 然后就 ...
模态框获取页面请求数据
添加模态框点击事件 <td ><button type="button" class="btn btn-primary" onclick=&q ...
jquery editable ajax,使用X-editable jQuery库使用来自AJAX请求的数据填充Select2标记输入字段...
我迫切需要JavaScript专家的一些帮助 . 我花了最近7个小时尝试了数百种代码组合,以获得基本的标签选择输入字段,以便与库 x-editable 和 select2 一起使用 . 我正在构建一个 ...
SpringBoot+Thymeleaf实现图片上传和显示
1.导入两个图片上传所需要的依赖,查看自己是否已经导入. <dependency><groupId>com.alibaba</gro ...
SpringBoot thymeleaf页面下拉框使用枚举类
1. 定义枚举类,用来封装下拉框数据 package com.example.jmw.common.enums;public enum CsvMasterTypes {受注ファイル("1&q ...

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

场景

实现

Html代码

jquery代码

后台处理代码

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

最新文章

热门文章