layui form 使用val设置值,值是从父界面来的

发布于 2022-09-12 03:07:58 字数 5327 浏览 10 评论 0

[原因描述]
编辑编辑按钮,获取obj.data数据,
将obj.data数据赋值给window的属性formData
在layer弹出后的iframe中获取parent的fromData,使用val函数进行赋值
界面

点击编辑按钮执行下面的代码

 table.on('tool(complainList)', function(obj) {
    var data = obj.data;
    window.formData = obj.data;
    json = JSON.stringify(data);
    switch (obj.event) {
      case 'edit':
        var w = ($(window).width() * 0.7);
        var h = ($(window).height() - 50);
        var index = layer.open({
          type: 2,
          title: titile + "编辑页面",
          area: ['60%', '60%'],
          fix: false,
          maxmin: true,
          shadeClose: true,
          shade: 0.4,
          skin: 'layui-layer-lan',
          content: "formComplaintForm.html",
        });
        break;
      case 'del':

在弹出的界面formComplaintForm.html中获取formData并赋值

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css" />
</head>

<body>
<form class="layui-form" action="" style="display: block;" id="form-data" lay-filter="data-form">
  <div class="layui-form-item">
    <label for="" class="layui-form-label">投诉ID</label>
    <div class="layui-input-block">
      <input type="text" name="id" required lay-verify="required" placeholder="投诉ID" autocomplete="off" class="layui-input" readonly>
    </div>
  </div>
  <div class="layui-form-item">
    <label for="" class="layui-form-label">服务编号</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="serviceCode" required lay-verify="required" placeholder="请输入服务编号" />
    </div>
  </div>
  <div class="layui-form-item">
    <lable class="layui-form-label">服务类型</lable>
    <div class="layui-input-block">
      <input type="text" name="compType" class="layui-input" placeholder="请输服务类型" autocomplet="off" required layui-verify='required' /></div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">投诉订单号</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="compOrder" placeholder="请输入服务订单号" autocomplete='off' required layui-verify='required' />
    </div>
  </div>
  <div class="layui-form-item">
    <label for="" class="layui-form-label">投诉原因</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" placeholder="请输入投诉原因" name="compReason" autocomplete="off" required layui-verify="required" /></div>
  </div>
  <div class="layui-form-item">
    <label for="" class="layui-form-label">投诉详情</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" placeholder="请输入投诉详情" name="compDetail" autocomplete="off" required layui-verify='required' /></div>
  </div>
  <div class="layui-from-item">
    <label for="" class="layui-form-label">投诉状态</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" placeholder="请输入投诉状态" name="complainState" autocomplete="off" required layui-verify="required" /></div>
  </div>
  <div class="layui-form-item">
    <label for="" class="layui-form-label">数据状态</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" placeholder="请输入数据状态" name="validFlag" autocomplete="off" required layui-verify='required' /></div>
  </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="front-submit" id="front-submit">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

</body>
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['form'], function() {
  form = layui.form;
  form.render();
  form.val('data-form',window.parent.formData)
});
</script>

</html>

奇怪的是,赋值失败,from中的值还是原样
我于是进行手动赋值查看

layui.use(['form'], function() {
  form = layui.form;
  form.render();
  debugger;
  form.val('data-form',window.parent.formData)
  var data1=window.parent.formData;
  var data2={id: 3, serviceCode: "001", compType: "0", compOrder: "001", compReason: "none",};
  console.log(data1);
  console.log(data2);
  form.val('data-form',data2)
});

form.val('data-form',data2) 可以赋值成功,但是
form.val('data-form',data1)却赋值失败,我观察data1和data2的数据是相同的,为什么使用data2会赋值失败呢?
源码地址

https://gitee.com/litongjava_admin/java-ee-spring-boot-1.5.8-study/blob/master/ee-spring-boot-1.5.8-layui-2.5.5/src/main/resources/ee-spring-boot-1.5.8-layui-2.5.5/formComplaintList.html

分享到QQ

分享到微博