（参考了下面这篇文章，特别感谢！）
https://blog.csdn.net/wowlw411/article/details/107104882/
-
实现效果图
-
html
需要注意，不同区块的表格的第一行的每一个input标签，要有对应的id，id命名规则需要结合区块名称
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
<style>
label {
float: left;
display: block;
padding: 9px 15px;
width: 120px;
font-weight: 400;
line-height: 20px;
text-align: right;
}
.label-arrow{
width: 30px;
padding: 9px 0px;
text-align: center;
}
.inputvalue{
width: 40px;
/*border: 1px solid #4e4e4e;*/
display: inline;
padding-left: 3px;
text-align: center;
}
.inputvalue1{
width: 40px;
display: inline;
padding-left: 3px;
margin-left: 5px;
z-index: 5;
float: left;
text-align: center;
}
.inputvalue2{
width: 40px;
display: inline;
padding-left: 3px;
}
.labeltest{
width: 130px;
margin-left: -100px;
z-index: -1;
}
.angle-range{
width: 120px;
}
.label-title{
width: 180px;
margin-top: 0px;
/* border: 1px solid #4e4e4e;*/
}
.label-title2{
width: 100px;
margin-top: 0px;
float: left;
}
.label-title3{
width: 60px;
margin-top: 0px;
padding: 9px 10px;
float: left;
text-align: left;
}
</style>
</head>
<body>
<div class="layui-form timo-compile">
<form th:action="@{/company/flowConfig/save}">
<input type="hidden" name="id" th:if="${flowConfig}" th:value="${flowConfig.id}">
<div class="layui-form-item">
<label CLASS="label-title">标题</label>
<div class="layui-input-inline angle-range" style="width: 130px">
<input class="layui-input" lay-verify="required" type="text" name="title" placeholder="请输入标题" th:value="${flowConfig?.title}">
</div>
</div>
<div class="layui-form-item">
<label CLASS="label-title">测试气压（KPa）</label>
<div class="layui-input-inline" style="width: 130px">
<input class="layui-input" lay-verify="required|number" type="text" name="pressure" placeholder="请输入测试气压" th:value="${flowConfig?.pressure}">
</div>
</div>
<!-- ZKG -->
<div class="layui-form-item" style="position: relative">
<label class="label-title2">ZKG</label>
<div class="containers">
<label class="label-title3">角度区间</label>
<div id="table1">
<table class="table" id="table_ZKG">
<tr style="width: 135px">
<td>
<input class="layui-input inputvalue1" placeholder="始" lay-verify="required|number" type="text" name="a_ZKG" id="a_ZKG">
<label class="label-arrow">→</label>
<input class="layui-input inputvalue1" placeholder="终" lay-verify="required|number" type="text" name="b_ZKG" id="b_ZKG">
</td>
<td>
<label class="layui-form-label">角度间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" name="angleStep_ZKG" id="angleStep_ZKG" placeholder="度">
</div>
</td>
<td>
<label class="layui-form-label">时间间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" name="timeStep_ZKG" id="timeStep_ZKG" placeholder="秒">
</div>
</td>
<td>
<button type="button" data-type="ZKG" class="layui-btn layui-btn-warm layui-btn-sm addCFGs">
<i class="layui-icon"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- HWK -->
<div class="layui-form-item" style="position: relative">
<label class="label-title2">HWK</label>
<div class="containers">
<label class="label-title3">角度区间</label>
<div id="table2" >
<table class="table" id="table_HWK">
<tr style="width: 135px">
<td>
<input class="layui-input inputvalue1" placeholder="始" lay-verify="required|number" type="text" id="a_HWK" name="a_HWK">
<label class="label-arrow">→</label>
<input class="layui-input inputvalue1" placeholder="终" lay-verify="required|number" type="text" id="b_HWK" name="b_HWK">
</td>
<td>
<label class="layui-form-label">角度间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" id="angleStep_HWK" name="angleStep_HWK" placeholder="度">
</div>
</td>
<td>
<label class="layui-form-label">时间间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" id="timeStep_HWK" name="timeStep_HWK" placeholder="秒">
</div>
</td>
<td>
<button type="button" data-type="HWK" class="layui-btn layui-btn-warm layui-btn-sm addCFGs">
<i class="layui-icon"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- BYPASS -->
<div class="layui-form-item" style="position: relative">
<label class="label-title2">BYPASS</label>
<div class="containers">
<label class="label-title3">角度区间</label>
<div id="table3">
<table class="table" id="table_BYPASS">
<tr style="width: 135px">
<td>
<input class="layui-input inputvalue1" placeholder="始" lay-verify="required|number" type="text" id="a_BYPASS" name="a_BYPASS">
<label class="label-arrow">→</label>
<input class="layui-input inputvalue1" placeholder="终" lay-verify="required|number" type="text" id="b_BYPASS" name="b_BYPASS">
</td>
<td>
<label class="layui-form-label">角度间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" id="angleStep_BYPASS" name="angleStep_BYPASS" placeholder="度">
</div>
</td>
<td>
<label class="layui-form-label">时间间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" id="timeStep_BYPASS" name="timeStep_BYPASS" placeholder="秒">
</div>
</td>
<td>
<button type="button" data-type="BYPASS" class="layui-btn layui-btn-warm layui-btn-sm addCFGs">
<i class="layui-icon"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- MOK -->
<div class="layui-form-item" style="position: relative">
<label class="label-title2">MOK</label>
<div class="containers">
<label class="label-title3">角度区间</label>
<div id="table">
<table class="table" id="table_MOK">
<tr style="width: 135px">
<td>
<input class="layui-input inputvalue1" placeholder="始" lay-verify="required|number" type="text" id="a_MOK" name="a_MOK">
<label class="label-arrow">→</label>
<input class="layui-input inputvalue1" placeholder="终" lay-verify="required|number" type="text" id="b_MOK" name="b_MOK">
</td>
<td>
<label class="layui-form-label">角度间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" id="angleStep_MOK" name="angleStep_MOK" placeholder="度">
</div>
</td>
<td>
<label class="layui-form-label">时间间隔</label>
<div class="layui-input-inline" style="width: 40px">
<input class="layui-input inputvalue" lay-verify="required|number" type="text" id="timeStep_MOK" name="timeStep_MOK" placeholder="秒">
</div>
</td>
<td>
<button type="button" data-type="MOK" class="layui-btn layui-btn-warm layui-btn-sm addCFGs">
<i class="layui-icon"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label >备注</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[${flowConfig?.remark}]]</textarea>
</div>
</div>
<div class="layui-form-item timo-finally">
<button class="layui-btn" lay-filter="saveFlowCfgs" lay-submit><i class="fa fa-check-circle"></i> 保存</button>
<button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
</div>
</form>
</div>
- 动态添加表格的行（这里用表格做格式，容易对齐）。通过绑定添加按钮的class来触发方法，通过按钮的自定义属性data-type=“MOK” 来传递区块名
//动态添加input输入框
$("body").on('click',".addCFGs",function(){
let typeStr = $(this).attr("data-type");
let str2 =
'<tr style="width: 135px">' +
' <td><input class="layui-input inputvalue1" placeholder="始" lay-verify="required|number" type="text" name="a_'+typeStr+'" value="1">' +
' <label class="label-arrow">→</label>' +
' <input class="layui-input inputvalue1" placeholder="终" lay-verify="required|number" type="text" name="b_'+typeStr+'" value="10">' +
' </td>' +
' <td>' +
' <label class="layui-form-label">角度间隔</label>' +
' <div class="layui-input-inline" style="width: 40px">' +
' <input class="layui-input inputvalue" lay-verify="required|number" type="text" name="angleStep_'+typeStr+'" placeholder="度" value="1">' +
' </div>' +
' </td>' +
' <td>' +
' <label class="layui-form-label">时间间隔</label>' +
' <div class="layui-input-inline" style="width: 40px">' +
' <input class="layui-input inputvalue" lay-verify="required|number" type="text" name="timeStep_'+typeStr+'" placeholder="秒" value="1"> ' +
' </div>' +
' </td>' +
' <td> <button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button></td>' +
'</tr>'
let container = $(this).parent().parent().parent();
container.append(str2);
});
- 保存到后台。向后台传参时，先由前台收集好参数并拼接成字符串，容易处理。
form.on('submit(saveFlowCfgs)', function(data) {
let form1 = $(this).parents("form");
let url = form1.attr("action");
let serializeArray = form1.serializeArray();
let a_ZKG="", b_ZKG="", angleStep_ZKG="", timeStep_ZKG="";
$('input[name="a_ZKG"]').each(function(index, domEle){ a_ZKG += domEle.value + ","; });
a_ZKG = a_ZKG.substr(0, a_ZKG.length-1);
$('input[name="b_ZKG"]').each(function(index, domEle){ b_ZKG += domEle.value + ","; });
b_ZKG = b_ZKG.substr(0, b_ZKG.length-1);
$('input[name="timeStep_ZKG"]').each(function(index, domEle){ timeStep_ZKG += domEle.value + ","; });
timeStep_ZKG = timeStep_ZKG.substr(0, timeStep_ZKG.length-1);
$('input[name="angleStep_ZKG"]').each(function(index, domEle){ angleStep_ZKG += domEle.value + ","; });
angleStep_ZKG = angleStep_ZKG.substr(0, angleStep_ZKG.length-1);
serializeArray.push({name:"a_ZKGs", value:a_ZKG});
serializeArray.push({name:"b_ZKGs", value:b_ZKG});
serializeArray.push({name:"timeStep_ZKGs", value:timeStep_ZKG});
serializeArray.push({name:"angleStep_ZKGs", value:angleStep_ZKG});
let a_HWKs="", b_HWKs="", angleStep_HWKs="", timeStep_HWKs="";
$('input[name="a_HWK"]').each(function(index, domEle){ a_HWKs += domEle.value + ","; });
a_HWKs = a_HWKs.substr(0, a_HWKs.length-1);
$('input[name="b_HWK"]').each(function(index, domEle){ b_HWKs += domEle.value + ","; });
b_HWKs = b_HWKs.substr(0, b_HWKs.length-1);
$('input[name="angleStep_HWK"]').each(function(index, domEle){ angleStep_HWKs += domEle.value + ","; });
angleStep_HWKs = angleStep_HWKs.substr(0, angleStep_HWKs.length-1);
$('input[name="timeStep_HWK"]').each(function(index, domEle){ timeStep_HWKs += domEle.value + ","; });
timeStep_HWKs = timeStep_HWKs.substr(0, timeStep_HWKs.length-1);
serializeArray.push({name:"a_HWKs", value:a_HWKs});
serializeArray.push({name:"b_HWKs", value:b_HWKs});
serializeArray.push({name:"angleStep_HWKs", value:angleStep_HWKs});
serializeArray.push({name:"timeStep_HWKs", value:timeStep_HWKs});
let a_BYPASS="", b_BYPASS="", angleStep_BYPASS="", timeStep_BYPASS="";
$('input[name="a_BYPASS"]').each(function(index, domEle){ a_BYPASS += domEle.value + ","; });
a_BYPASS = a_BYPASS.substr(0, a_BYPASS.length-1);
$('input[name="b_BYPASS"]').each(function(index, domEle){ b_BYPASS += domEle.value + ","; });
b_BYPASS = b_BYPASS.substr(0, b_BYPASS.length-1);
$('input[name="angleStep_BYPASS"]').each(function(index, domEle){ angleStep_BYPASS += domEle.value + ","; });
angleStep_BYPASS = angleStep_BYPASS.substr(0, angleStep_BYPASS.length-1);
$('input[name="timeStep_BYPASS"]').each(function(index, domEle){ timeStep_BYPASS += domEle.value + ","; });
timeStep_BYPASS = timeStep_BYPASS.substr(0, timeStep_BYPASS.length-1);
serializeArray.push({name:"a_BYPASSes", value:a_BYPASS});
serializeArray.push({name:"b_BYPASSes", value:b_BYPASS});
serializeArray.push({name:"angleStep_BYPASSes", value:angleStep_BYPASS});
serializeArray.push({name:"timeStep_BYPASSes", value:timeStep_BYPASS});
let a_MOK="", b_MOK="", angleStep_MOK="", timeStep_MOK="";
$('input[name="a_MOK"]').each(function(index, domEle){ a_MOK += domEle.value + ","; });
a_MOK = a_MOK.substr(0, a_MOK.length-1);
$('input[name="b_MOK"]').each(function(index, domEle){ b_MOK += domEle.value + ","; });
b_MOK = b_MOK.substr(0, b_MOK.length-1);
$('input[name="angleStep_MOK"]').each(function(index, domEle){ angleStep_MOK += domEle.value + ","; });
angleStep_MOK = angleStep_MOK.substr(0, angleStep_MOK.length-1);
$('input[name="timeStep_MOK"]').each(function(index, domEle){ timeStep_MOK += domEle.value + ","; });
timeStep_MOK = timeStep_MOK.substr(0, timeStep_MOK.length-1);
serializeArray.push({name:"a_MOKs", value:a_MOK});
serializeArray.push({name:"b_MOKs", value:b_MOK});
serializeArray.push({name:"angleStep_MOKs", value:angleStep_MOK});
serializeArray.push({name:"timeStep_MOKs", value:timeStep_MOK});
$.post(url, serializeArray, function (result) {
if (result.data == null) {
result.data = 'submit[refresh]';
}
$.fn.Messager(result);
}, "json");
return false; //这句要加上，否则可能会报错
});
- 后台实体类：
/**
* @author bam
* @date 2020/11/17
*/
@Data
@Entity
@Table(name="company_flowConfig")
@EntityListeners(AuditingEntityListener.class)
@Where(clause = StatusUtil.NOT_DELETE)
public class FlowConfig implements Serializable {
// 主键ID
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
// 标题
private String title;
// 备注
private String remark;
private Integer defaultCFG;
// 创建时间
@CreatedDate
private Date createDate;
// 更新时间
@LastModifiedDate
private Date updateDate;
// 创建者
@CreatedBy
@ManyToOne(fetch=FetchType.LAZY)
@NotFound(action=NotFoundAction.IGNORE)
@JoinColumn(name="create_by")
@JsonIgnore
private User createBy;
// 更新者
@LastModifiedBy
@ManyToOne(fetch=FetchType.LAZY)
@NotFound(action=NotFoundAction.IGNORE)
@JoinColumn(name="update_by")
@JsonIgnore
private User updateBy;
// 数据状态
private Byte status = StatusEnum.OK.getCode();
// 测试气压
private Integer pressure;
private String a_ZKGs;
private String b_ZKGs;
private String timeStep_ZKGs;
private String angleStep_ZKGs;
private String a_MOKs;
private String b_MOKs;
private String timeStep_MOKs;
private String angleStep_MOKs;
private String a_HWKs;
private String b_HWKs;
private String timeStep_HWKs;
private String angleStep_HWKs;
private String a_BYPASSes;
private String b_BYPASSes;
private String timeStep_BYPASSes;
private String angleStep_BYPASSes;
}
- 后台controller。两个方法，一个是保存，一个是编辑。
/**
* 跳转到编辑页面
*/
@GetMapping("/edit/{id}")
@RequiresPermissions("company:flowConfig:edit")
public String toEdit(@PathVariable("id") FlowConfig flowConfig, Model model) {
model.addAttribute("flowConfig", flowConfig);
return "/company/flowConfig/add";
}
/**
* 保存添加/修改的数据
*/
@PostMapping("/save")
@RequiresPermissions({"company:flowConfig:add", "company:flowConfig:edit"})
@ResponseBody
// public ResultVo save(@RequestParam Map<String, String> properties) {//这种方法也可以传参
public ResultVo save(FlowConfig flowConfig) {
// 复制保留无需修改的数据
if (flowConfig.getId() != null) {
FlowConfig beFlowConfig = flowConfigService.getById(flowConfig.getId());
EntityBeanUtil.copyProperties(beFlowConfig, flowConfig);
}
/* if (flowConfig.getAngleMin()<0)flowConfig.setAngleMin(0f);
if (flowConfig.getAngleMax()>263)flowConfig.setAngleMax(263f);
if (flowConfig.getAngleMax()<=flowConfig.getAngleMin()){
flowConfig.setAngleMin(0f);
flowConfig.setAngleMax(263f);
}*/
// 保存数据
flowConfigService.save(flowConfig);
return ResultVoUtil.SAVE_SUCCESS;
}
- 删除一组
//删除动态添加的input输入框
$("body").on('click',".removeclass",function(){
var parentEle = $(this).parent().parent();
parentEle.remove();
});
- 回显
//动态回显input值
let a_ZKGs = [[${flowConfig?.a_ZKGs}]];
let b_ZKGs = [[${flowConfig?.b_ZKGs}]];
let timeStep_ZKGs = [[${flowConfig?.timeStep_ZKGs}]];
let angleStep_ZKGs = [[${flowConfig?.angleStep_ZKGs}]];
let a_MOKs = [[${flowConfig?.a_MOKs}]];
let b_MOKs = [[${flowConfig?.b_MOKs}]];
let timeStep_MOKs = [[${flowConfig?.timeStep_MOKs}]];
let angleStep_MOKs = [[${flowConfig?.angleStep_MOKs}]];
let a_HWKs = [[${flowConfig?.a_HWKs}]];
let b_HWKs = [[${flowConfig?.b_HWKs}]];
let timeStep_HWKs = [[${flowConfig?.timeStep_HWKs}]];
let angleStep_HWKs = [[${flowConfig?.angleStep_HWKs}]];
let a_BYPASSes = [[${flowConfig?.a_BYPASSes}]];
let b_BYPASSes = [[${flowConfig?.b_BYPASSes}]];
let timeStep_BYPASSes = [[${flowConfig?.timeStep_BYPASSes}]];
let angleStep_BYPASSes = [[${flowConfig?.angleStep_BYPASSes}]];
let as = [],bs = [], angleSteps = [], timeSteps = [], models=[] ;
as.push(a_ZKGs);
as.push(a_BYPASSes);
as.push(a_HWKs);
as.push(a_MOKs);
bs.push(b_ZKGs);
bs.push(b_BYPASSes);
bs.push(b_HWKs);
bs.push(b_MOKs);
timeSteps.push(timeStep_ZKGs);
timeSteps.push(timeStep_BYPASSes);
timeSteps.push(timeStep_HWKs);
timeSteps.push(timeStep_MOKs);
angleSteps.push(angleStep_ZKGs);
angleSteps.push(angleStep_BYPASSes);
angleSteps.push(angleStep_HWKs);
angleSteps.push(angleStep_MOKs);
models.push("ZKG");
models.push("BYPASS");
models.push("HWK");
models.push("MOK");
$.each(as,function (i,json) {
let a = (as[i] || "").split(',');
let b = (bs[i] || "").split(',');
let timeStep = (timeSteps[i] || "").split(',');
let angleStep = (angleSteps[i] || "").split(',');
$.each(a,function (j,json) {
if (j === 0) {
fillTable(a[j], b[j], angleStep[j], timeStep[j], models[i]);
}
if (j > 0) {
addTr(a[j], b[j], angleStep[j], timeStep[j], models[i]);
}
});
});
function fillTable(a_, b_, angle_, time_, model_) {
$("#a_"+model_).val(a_);
$("#b_"+model_).val(b_);
$("#angleStep_"+model_).val(angle_);
$("#timeStep_"+model_).val(time_);
}
function addTr(a, b, angle, time, model_){
let tr =
'<tr style="width: 135px">' +
' <td><input class="layui-input inputvalue1" placeholder="始" lay-verify="required|number" type="text" name="a_'+model_+'" value='+a+'>' +
' <label class="label-arrow">→</label>' +
' <input class="layui-input inputvalue1" placeholder="终" lay-verify="required|number" type="text" name="b_'+model_+'" value='+b+'>' +
' </td>' +
' <td>' +
' <label class="layui-form-label">角度间隔</label>' +
' <div class="layui-input-inline" style="width: 40px">' +
' <input class="layui-input inputvalue" lay-verify="required|number" type="text" name="angleStep_'+model_+'" placeholder="度" value='+angle+'>' +
' </div>' +
' </td>' +
' <td>' +
' <label class="layui-form-label">时间间隔</label>' +
' <div class="layui-input-inline" style="width: 40px">' +
' <input class="layui-input inputvalue" lay-verify="required|number" type="text" name="timeStep_'+model_+'" placeholder="秒" value='+time+'> ' +
' </div>' +
' </td>' +
' <td> <button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button></td>' +
'</tr>';
let table = $("#table_"+model_);
table.append(tr);
}
- 说明。
所有的js代码都要放在layui相关区域中。
layui.use([ 'layer', 'upload', 'form'], function () {
var $ = layui.jquery;
var layer = layui.layer; //加载layer模块
var upload = layui.upload; //加载upload模块
let form = layui.form;
/**
*
* js代码
*
*
*/
});
7347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
