Layui的相关小记

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>