Layui动态添加html的select、input的radio失效,无法显示;layui的时间组件重复使用
1.如代码
//添加选项
var ekey = 0;
function addxuanxiang(obj,ekey){
$(obj).parent().append(`
<form class="layui-form">
<div style="width: 1000px;display: flex;flex-wrap: wrap;" class="layui-input-inline" >
<input class="layui-input timetest" type="text" name="info[custom_time][]" value="" placeholder="请输入自定义开市时间">
<select style="" name="info[custom_time][]" >
<option value="">请选择一个日期</option>
<option value="周一">周一</option>
<option value="周二">周二</option>
<option value="周三">周三</option>
<option value="周四">周四</option>
<option value="周五">周五</option>
<option value="周六">周六</option>
<option value="周日">周日</option>
</select>
<button style="float: right;margin-top: 3px;margin-left: 10px;" type="button" class="layui-btn layui-btn-primary layui-btn-sm" οnclick="$(this).parent().remove()">
<i class="fa fa-minus"></i>
</button>
</div>
</form>
`);
添加如下代码,让其重新加载
layui.use('form', function(){
let form = layui.form;
form.render(); //更新所有form表单
});
时间组件重复使用,加了 trigger: 'click' 使其不会一闪而过
layui.use("laydate", function(){
var laydate = layui.laydate;
lay(".timetest").each(function(){
laydate.render({
elem: this
,range: true
,type: "time"
,trigger: 'click'
});
});
});
}
2.layer.open弹出层中动态添加时,lay-verify="required"失效
layer.open({type:1,title:'外汇机器人编辑',content:html,area:['900px','600px'],shadeClose:true,btn:['确定','取消'],
yes: function(index){
var form = layui.form;
var isValid = true; // 标记是否通过验证
// 手动对指定lay-filter的表单进行验证
$('.layui-form[lay-filter="changepriceForm"] input').each(function(){
if($(this).attr('lay-verify') === 'required'){
let num = $(this).val()
console.log(/^\d+\d+\d$/.test(num))
console.log(num<=0)
if(/^\d+\d+\d$/.test(num)==false && num<=0){
layer.msg('必填项不能为空,且数字大于0');
isValid = false;
return false; // 结束循环
}
}
});
// 如果通过验证,则继续后续操作
if(isValid){
var datamag = layui.form.val("changepriceForm");
datamag['id'] = editid;
var index = layer.load();
$.post("{:url('saveedit')}", datamag, function(data){
layer.close(index);
dialog(data.msg, data.status);
});
}
}
});
3. layui让表格的多行内容单行显示
<style>
/* 设置单行显示,并添加省略号 */
.layui-table-cell {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
4.layui 触发单元格(点击事件与toolbar)
table.on('事件)
var table = layui.table;
var datawhere = {};
//数据表
var tableIns = table.render({
elem: '#tabledata'
,url: "{$Request.url}" //数据接口
,limit:20
,page: true //开启分页
,cols: [[ //表头
{type:"checkbox"},
{field: 'id',align:'center', title: 'ID',width:60},
{field: 'other_money',align:'center', title: '其它币种金额',templet:function(d){
let html='';
html= '<a class="layui-btn layui-btn-xs" lay-event="showprice">查看余额</a>'
return html
}},
{field: 'operation', title: '操作',toolbar:'#barDemo',width:170}
]]
});
// 其他金额 -> 点击触发
table.on('tool', function(obj){
var data = obj.data; // 获取当前行数据
var layEvent = obj.event; // 获取当前操作的事件名
if(layEvent === 'showprice'){
//执行操作
}
});
// toolbar加载
<script type="text/html" id="barDemo">
//tpl模板引擎
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" onclick="opens({{d.id}})">编辑</a>
<a class="layui-btn layui-btn-xs" onclick="showdetail({{d.id}})">详情</a>
<a class="layui-btn layui-btn-xs" onclick="datadel({{d.id}})">删除</a>
{{# if(d.check == 0 ){ }}
<a class="layui-btn layui-btn-xs" onclick="setst({{d.id}},1)">通过</a>
<a class="layui-btn layui-btn-xs" onclick="setst({{d.id}},2)">驳回</a>
{{# } }}
{{# if(d.check == 2 ){ }}
<a class="layui-btn layui-btn-xs" onclick="setst({{d.id}},1)">通过</a>
{{# } }}
</div>
</script>