layui-表单传值不可忽略的点

---

前言

layui使用过程中的磕磕绊绊之表单传值

---

form表单传值

示例：

<form class="layui-form">
  <div class="layui-col-md3">
    <div class="layui-form-item ">
      <label class="layui-form-label">迟到扣除(元)</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="text" name="late_cut" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
      </div>
    </div>

  </div>

  <div class="layui-col-md3">
    <div class="layui-form-item">
      <label class="layui-form-label">早退扣除(元)</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="text" name="early_leave_cut" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
      </div>
    </div>
  </div>

  <div class=" layui-col-md3">
    <div class="layui-form-item">
      <label class="layui-form-label">缺勤扣除(元)</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="text" name="absence_cut" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-col-md3">
    <div class="layui-form-item">
      <label class="layui-form-label">请假扣除(元)</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="text" name="leave_cut" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
      </div>
    </div>

  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

需要对应的form表单的js发送数据，

<script>
  layui.use('table', function(){
    var table = layui.table;
    var laydate = layui.laydate;
    var form = layui.form;

    // 渲染
    table.render({
      elem: '#ID-table-demo-parse'
      ,url:'/IMS_for_Productive_Enterprises_war_exploded/SelectClockingDeduction'
      ,page: true
      ,response: {
        statusCode: 0 // 重新规定成功的状态码为 200，table 组件默认为 0
      }
      ,cols: [[
        {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
        ,{field:'employee_id', title:'工号'}
        ,{field:'employee_name', title:'姓名'}
        ,{field:'days_worked', title:'出勤天数',  sort: true}
        ,{field:'late_count', title:'迟到',  sort: true}
        ,{field:'early_leave_count', title:'早退'}
        ,{field:'absence_count', title:'缺席', }
        ,{field:'leave_count', title:'请假'}
        ,{field:'attendance_rate', title:'出席率'}
        ,{field:'attendance_score', title:'考勤分'}
        ,{field:'absence_deduction', title:'扣除费'}
      ]]
      ,height: 315
    });
    laydate.render({
      elem: '#attendance-date',
      format: 'yyyy-MM-dd',
      value: new Date(),
      done: function(value, date){
        // 向后台发送请求，获取对应日期的考勤数据
        var url = "getAttendanceData.jsp?attendance_date=" + value;
        $.get(url, function(result){
          // 解析服务器返回的JSON数据
          var data = JSON.parse(result);
          // 将数据填充到表格中
          // ...
        });
      }
    });
    form.on('submit(demo1)', function(data){
      var field = data.field; // 获得表单字段
      // 执行搜索重载
      table.reload('ID-table-demo-parse', {
        page: {
          curr: 1 // 重新从第 1 页开始
        },
        where: field // 搜索的字段
      });
      layer.msg('设置成功');
      return false; // 阻止默认 form 跳转
    });

  });
</script>

其中：关于form的部分要重点看噢，少了这部分的东西，后台不管怎么接收都是null值。