弹框表单通过Ajax进行数据绑定填充

来源：互联网发布：淘宝tbi数据包怎么用编辑：程序博客网时间：2024/05/17 23:40

触发弹框链接按钮：

<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")@ResponseBodypublic 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绑定并填充到表单上。

阅读全文

0 0