翻阅layui官方API发现
Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)
所以当新添加这些元素以后需要对页面表单元素重新渲染一下
<script>
var form,layer, $,laydate;
layui.use(['form','laydate'], function(){
form = layui.form;
layer = layui.layer;
$ = layui.$;
laydate = layui.laydate;
//初始化日期
// initDateType("rq_1",true);
//初始化时间
// initTimeType("kssj_1",true);
// initTimeType("jssj_1",true);
laydate.render({
elem:'#dtime'
,trigger: 'click'// 解决一闪而过的问题
,value: new Date()//默认当前时间
});
laydate.render({
elem:'#stdtime'
,trigger: 'click'// 解决一闪而过的问题
,value: new Date()//默认当前时间
});
$('#cancel').on('click',function (){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
})
//自定义验证规则
form.verify(form_verify);
//监听提交
form.on('submit(submit_form)', function(data){
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "${pageContext.request.contextPath}/taklhjz/bybqhjl/saveMore" ,//url
data: $('#form').serialize(),
success: function (res) {
if (res.success) {
setOpenCloseParam("reload");
layer.msg("数据保存成功。", {time: 2000});
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}else{
if(res.loseSession=='loseSession'){
loseSession(res.msg,res.url)
}else{
layer.msg(res.msg, {time: 2000});
}
}
},
error : function() {
layer.msg("异常!");
}
});
return false;
});
// form.render();
});
var index = 1;
function addLine(){
index ++;
var tt = '<tr id="tr_'+index+'">';
tt += '<td><select name="eqname" id="eqname" lay-verify="field_len50" lay-filter="">\n' +
' <option value="">请选择设备名称</option>\n' +
' <option value="循环水泵">循环水泵</option>\n' +
' <option value="热水循环泵">热水循环泵</option>\n' +
' <option value="定压补水泵">定压补水泵</option>\n' +
' <option value="生活给水泵">生活给水泵</option>\n' +
' <option value="生产水泵">生产水泵</option>\n' +
' <option value="循环水补水泵">循环水补水泵</option>\n' +
' <option value="消防稳压泵">消防稳压泵</option>\n' +
' <option value="仪表风压缩机">仪表风压缩机</option>\n' +
' <option value="仪表风吸干机">仪表风吸干机</option>\n' +
' <option value="PSA空压机">PSA空压机</option>\n' +
' <option value="BOG压缩机A润滑油泵">BOG压缩机A润滑油泵</option>\n' +
' <option value="BOG压缩机B润滑油泵">BOG压缩机B润滑油泵</option>\n' +
' <option value="BOG压缩机A冷却水泵">BOG压缩机A冷却水泵</option>\n' +
' <option value="BOG压缩机B冷却水泵">BOG压缩机B冷却水泵</option>\n' +
' <option value="MR1压缩机润滑油泵">MR1压缩机润滑油泵</option>\n' +
' <option value="MR2压缩机润滑油泵">MR2压缩机润滑油泵</option>\n' +
' <option value="洗涤塔回流泵">洗涤塔回流泵</option>\n' +
' <option value="重烃输送泵">重烃输送泵</option>\n' +
' <option value="循环水缓蚀阻垢剂加药泵">循环水缓蚀阻垢剂加药泵</option>\n' +
' <option value="贫胺低压循环泵">贫胺低压循环泵</option>\n' +
' <option value="胺高压循环泵">胺高压循环泵</option>\n' +
' <option value="再生塔回流泵">再生塔回流泵</option>\n' +
' </select></td>';
tt += '<td><input type="text" name="ooupn" id="ooupn" lay-verify="field_len50" autocomplete="off" placeholder="请输入原运行机组位号" class="layui-input"></td>';
tt += '<td><input type="text" name="stpn" id="stpn" lay-verify="field_len50" autocomplete="off" placeholder="请输入切换至机组位号" class="layui-input"></td>';
tt += '<td><input type="text" name="stdtime" id="stdtime_'+index+'" lay-verify="field_len50" autocomplete="off" placeholder="请输入切换时间" class="layui-input"></td>';
tt += '<td><input type="text" name="operator" id="operator" lay-verify="field_len50" value="${loginUser.login_name}" autocomplete="off" placeholder="请输入操作人" class="layui-input"></td>';
tt += '<td><input type="text" name="arecord" id="arecord" lay-verify="field_len50" autocomplete="off" placeholder="请输入异常记录" class="layui-input"></td>';
tt += '<td><textarea name="taklhjz_bz" id="taklhjz_bz" placeholder="请输入" lay-verify="field_len500" class="layui-textarea"></textarea></td>';
tt += '<td style="width: 78px;"><div class="layui-btn-group"><button type="button" onclick="addLine();" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" onclick="delLine(\''+index+'\');" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon"></i></button></div></td>';
tt += '</tr>';
$("#table tr:last").after(tt);
//初始化日期
initDateType("stdtime_"+index,true);
// //初始化时间
// initTimeType("kssj_"+index,true);
// initTimeType("jssj_"+index,true);
// laydate.render({
// elem:'#"stdtime_"+index'
// ,trigger: 'click'// 解决一闪而过的问题
// ,value: new Date()//默认当前时间
// });
//但是,如果你的HTML是动态生成的,自动渲染就会失效
//因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
form.render();
}
function delLine(index){
$("#tr_"+index).remove();
}
</script>
//但是,如果你的HTML是动态生成的,自动渲染就会失效
//因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
form.render();
在你需要批量的方法里面添加
form.render();
完美实现!
上诉代码在124行