fsLayui表单和数据表格同时提交

介绍

主要实现主表、附表同时新增或修改操作。
上一章我们介绍了fsLayuiPlugin数据表格编辑使用说明，本章主要讲表单和数据表格结合提交数据。

表单使用说明

这里的表单和普通表单处理一致，没有任何区别，包含表单验证等处理。

表单提交

点击保存按钮后，需要怎么获取到表格里面的数据？怎么把数据提交后台处理？

1. 保存按钮配置

function="save" 描述保存操作
groupId="test" 配置分组id，配置后会获取这个分组的所有数据
url="/fsbus/1007" 配置提交数据的url地址

<button class="layui-btn fsAdd" function="save" groupId="test" url="/fsbus/1007"><i class="layui-icon">&#xe609;</i>新增</button>

2. 表单配置

groupId="test" 配置分组id，配置后保存按钮会验证表单并且获取这个表单的数据

<form class="layui-form" groupId="test">

请求参数说明

表单提交默认的参数为： fsFormData ，对应的值是一个编码后的json字符串，后台获取值后需要解码。

• java 解码demo

try {
  fsFormData = URLDecoder.decode(fsFormData, "UTF-8");
} catch (UnsupportedEncodingException e) {
}

特殊说明

提交按钮可以在form表单中，也可以不在form表单中，但是必须指定按钮为普通按钮，不能是submit提交按钮。

表格数据提交

请参考
fsLayuiPlugin数据表格编辑使用说明

表单和表格同时提交

如果表单和表格数据需要同时提交，那么只需要保证groupId 是一致的即可。

效果图

效果图.gif

本文首发于我的博客：ITCTO技术博客