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

触发弹框链接按钮：

<a class="layui-btn layui-btn-mini table-edit" href="#" th:οnclick="'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绑定并填充到表单上。