触发弹框链接按钮:
<a class="layui-btn layui-btn-mini table-edit" href="#" th:onclick="'javascript:clickModifyBtn('+${item.id}+')'">编辑</a>
javascript:
<script> function clickModifyBtn(id) { var url="/assetTransfer/queryRecordById"; $.ajax({ url:url, data: { id:id }, type:'POST', success: function(result) {//msg为返回的数据,在这里做数据绑定; result=result.assetTransferRecord; if(result){ $("#id").val(result.id) $("#name").val(result.name) $("#currency").val(result.currency) $("#amount").val(result.amount) $("#mode").val(result.mode) $("#endDate").val(new Date(result.modifyTime).Format("yyyy-MM-dd")) } console.log(result); } }); } </script>后台controller:
@RequestMapping(value = "queryRecordById", produces = "application/json; charset=UTF-8") @ResponseBody public JSONObject queryRecordById(@RequestParam(required = true) Integer id) { AssetTransferRecord assetTransferRecord = assetTransferRecordService.selectByPrimaryKey(id); JSONObject result = new JSONObject(); result.put("assetTransferRecord", assetTransferRecord); return result; }弹框表单:
<div class="input-info input-info-pop" style="display: none;"> <div class="count-info-title"> 转账信息更新 </div> <form class="layui-form" th:action="@{/assetTransfer/updateRecord}" th:method="post"> <div class="layui-form-item"> <input type="hidden" id="id" name="id" /> <label class="layui-form-label">姓名:</label> <div class="layui-input-block"> <input type="text" id="name" name="name" lay-verify="name" placeholder="请输入姓名" autocomplete="off" class="layui-input" /> </div> </div> <div class="layui-form-item layui-inline layui-select-style"> <label class="layui-form-label">币种:</label> <div class="layui-input-block"> <input type="text" id="currency" name="currency" lay-verify="bicoinType" placeholder="请输入币种" autocomplete="off" class="layui-input" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">数量:</label> <div class="layui-input-block"> <input type="number" id="amount" name="amount" lay-verify="bicoinNumber" placeholder="请输入数量" autocomplete="off" class="layui-input" /> </div> </div> <div class="layui-form-item layui-inline layui-select-style"> <label class="layui-form-label">类型:</label> <div class="layui-input-block"> <select id="mode" name="mode" lay-filter="aihao"> <option value="1" th:selected="${mode==1}">转出</option> <option value="2" th:selected="${mode==2}">转入</option> </select> </div> </div> <div class="layui-form-item layui-inline"> <div class="layui-inline"> <label class="layui-form-label">日期:</label> <div class="layui-input-inline" style="width: 120px;"> <input type="long" id="inputTime" name="endDate" class="layui-input" placeholder="请选择" lay-verify="inputDate" /> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block btn-group"> <button class="layui-btn" style="width: 130px;" lay-filter="demo1" lay-submit="">确认修改</button> <button type="reset" class="layui-btn layui-btn-primary layui-fff">重置</button> </div> </div> </form> </div>js拿到的是后台传来的json数据,通过id绑定并填充到表单上。