layer 一些理解

于 2020-04-09 14:52:32 发布
阅读量1.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liufeifeihuawei/article/details/105409502
版权

"layui-input-inline"的意思是对于母div的子元素进行水平排列
class=“layui-inline” 可以用来div强制不换行
layui-form-item单独使用这个类会默认该元素独占一行
这是因为layui-input-block这个类是一个表单元素占一行，竖着，以例表的形式排列。然后配合layui-form-item的使用，使这两个元素处在同一行。
但通常来讲，我们不需要这么长的input，我们可以把外面的div的类换成class="layui-input-inline"试试
======================================“”





fixed 固定列 input 的属性autocomplete 默认为on 其含义代表zd是否让浏览器自动记录之前输入的值 很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到 可以在input中加入autocomplete="off" 来关闭记录 ` lay-verify="required" 必填项 验证字段是否为空 lay-filter 监听 submit 提交按钮 
   $('#refuse').on('click',function () {
        layer.open({
           type:1,
           area:['500px','300px'],
           content:$('#refuseDiv').html(),
            shadeClose:true,
            btn:['确认','取消'],
            title:'审核拒绝',
            yes:function (index,layero) {//index 为当前页面索引，layero 为当前页面的DOM，所以可以利用下面的方式获取
                $.ajax({
                    url:'<%=contextPath%>/doctor/refuseApply',
                    type:'post',
                    dataType:'json',
                    contentType:'application/json',
                    data:
                      JSON.stringify({
                          id:$("#userId").val(),
//获取的内容                          reason:$(layero).find('textarea[name=reason]').val(),
                          state:3
                      })
                    ,
                    success:function (data) {
                        if (data.code=='200'){

                            layer.msg("审核成功");
                            layer.close(index);
                            var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index1); //再执行关闭
                        }
                        else
                            layer.msg("审核失败");

                    },
                    error:function (data) {
                        layer.msg("审核失败");
                    }
                });
            },
            cancel:function (index,layero) {
                layui.layer.close(index);
            }

        });
    });

`

layui.use([ 'jquery', 'table', 'layer', 'form' ], function() {
	// 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
	var $ = layui.$;
	var table = layui.table;
	var layer = layui.layer;
	var form = layui.form;

	//显示分组
	table.render({
		elem : '#group-tbl',
		url : basePath + 'modulegroup/getTableData.do',
		method : 'get',
		cols : [ [ {
			field : '_name',
			title : '模块名称'
		}, {
			toolbar : '#group-tbl-toolbar',
			title : '操作'
		} ] ],
		id : 'group-tbl',
	});

	//监听行工具栏事件
	table.on('tool(group-tbl)', function(obj) {
		// 获取当前行数据和lay-event的值
		var data = obj.data;
		var event = obj.event;
		if (event == "selectGroup") {
			$('#_moduleGroupId').val(data._id);
			$('#_moduleGroupName').val(data._name);
			changeModuleGroup(data._id)
			layer.close(groupLayer);
		}
	})

	table.render({
		id : 'module-tbl',
		elem : '#module-tbl',
		url : basePath + 'module/getList.do',
		toolbar : '#module-tbl-toolbar',
		method : 'get',
		//page : true, //开启分页
		cols : [ [ {
			field : '_name',
			title : '模块名称',
			sort : true
		}, {
			field : '_classname',
			title : '模块类名',
			sort : true
		}, {
			field : '_orderId',
			title : '顺序号',
			sort : true
		}, {
			field : '_issync',
			title : '同步'
		}, {
			field : '_equipment',
			title : '设备配置',
			sort : true,
			templet : '#equipmentTmp'
		}, {
			field : '_generate_flag',
			title : '表生成状态',
			sort : true,
			templet : '#generateTmp'
		}, {
			field : '_remarks',
			title : '备注'
		}, {
			field : '_inputmen',
			title : '操作人员'
		}, {
			field : '_inputdate',
			title : '操作时间'
		}, {
			toolbar : '#module-rowtbl-toolbar',
			title : '操作',
			width : 200
		} ] ]
	});

	//查询监听
	form.on('submit(module-tbl-search)', function(data) {
		console.log(data);
		table.reload('module-tbl', {
			where : data.field
		})
	});

	//监听头部工具栏事件事件
	table.on('toolbar(module-tbl)', function(obj) {
		// 获取当前行数据和lay-event的值
		var data = obj.data;
		var event = obj.event;
		if (event == "addUI") {
			layer.msg("添加模块...");
			$('#add-module-form')[0].reset();
			layer.open({
				type : 1,
				title : '添加模块',
				fixed : true,
				offset: '100px',
				skin : 'layui-layer-molv',
				area : [ '500px' ],
				content : $('#add-module-layer')
			});
		}else if(event == "refresh"){
			table.reload('module-tbl');
        }
	})

	// 添加用户表单提交
	form.on('submit(add-module-form-submit)', function(data) {
		$.ajax({
			url : basePath + "module/edit.do",
			type : "POST",
			data : data.field,
			dataType : 'json',
			success : function(result) {
				if (result.success) {
					layer.closeAll();
					layer.msg('添加成功',{offset:"100px"});
					table.reload('module-tbl');
				} else {
					layer.msg(result.msg,{offset:"100px"});
				}
			},
			error : function() {
				console.log("ajax error");
			}
		});
		return false;
	});

	// 监听行工具栏事件：删除用户与更新用户
	table.on('tool(module-tbl)', function(obj) {
		var data = obj.data;
		var event = obj.event;
		if (event === 'generate') {
			layer.confirm('确定生成数据表吗？',{offset:"100px"}, function(index) {
				$.ajax({
					url : basePath + 'module/generate.do?_id=' + data._id,
					type : "GET",
					dataType : 'json',
					success : function(result) {
						if (result.success) {
							layer.msg('操作成功',{offset:"100px"});
							table.reload('module-tbl');
						} else {
							layer.msg(result.msg,{offset:"100px"});
						}
					},
					error : function() {
						console.log("ajax error");
					}
				});
				layer.close(index);
			});
		}

		//删除操作
		if (event == 'deleteModule') {
			layer.confirm('确定删除该数据吗?',{offset:'100px'},function(index) {
				$.ajax({
					url : basePath + "module/delete.do?_id=" + data._id,
					type : 'GET',
					dataType : 'json',
					success : function(result) {
						if (result.success) {
							layer.msg("操作成功");
							table.reload('module-tbl')
						} else {
							layer.msg(result.msg,{offset:"100px"});
						}
					},
					error : function() {
						layer.msg("ajax error",{offset:"100px"});
					}
				})
			})
		}

		// 更新模块事件
		if (event === 'updateModule') {
			form.val('update-module-form', {
				"_id" : data._id,
				"_orderId" : data._orderId,
				"_moduleGroupId" : data._moduleGroupId,
				"_name" : data._name,
				"_remarks" : data._remarks,
				"_isenter" : data._isenter,
				"_issync" : data._issync,
				"_classname" : data._classname,
				"_equipment" : data._equipment,
				"_moduleGroupName" : data._moduleGroupName
			});
			layer.open({
				type : 1,
				title : '更新模块',
				fixed : true,
				offset: '100px',
				skin : 'layui-layer-molv',
				area : [ '500px' ],
				content : $('#update-module-layer')
			});
			form.on('submit(update-module-form-submit)', function(data) {
				$.ajax({
					url : basePath + "module/edit.do",
					type : "GET",
					data : data.field,
					dataType : 'json',
					success : function(result) {
						if (result.success) {
							layer.closeAll();
							layer.msg('更新成功',{offset:"100px"});
							table.reload('module-tbl');
						} else {
							layer.msg(result.msg,{offset:"100px"});
						}
					},
					error : function() {
						console.log("ajax error",{offset:"100px"});
					}
				});
				return false;
			});
		}
	});
});

var groupLayer;
var addModuleLayer;
var editModuleLayer;
function selectModuleGroup() {
	groupLayer = layer.open({
		type : 1,
		offset: '100px',
		title : '选择模块分组',
		skin : 'layui-layer-molv',
		area : [ '300px' ],
		content : $('#group')
	});
}
function changeModuleGroup(_moduleGroupId) {
	var pre = "";
	if (_moduleGroupId == "1") {
		pre = "GXA";
	} else if (_moduleGroupId == "2") {
		pre = "GXB";
	} else if (_moduleGroupId == "3") {
		pre = "GXC";
	}
	$.ajax({
		type : 'POST',
		dataType : "json",
		url : basePath + "module/getMax.do",
		data : {
			'_moduleGroupId' : _moduleGroupId
		},
		async : false,
		success : function(data) {
			if (data.success) {
				pre = pre + data.msg;
				$('#_classname').val(pre);
				$('#_orderId').val(data.msg);
				$('#_isenter').val("1");
				$('#_issync').val("0");
			} else {
				alert(data.msg);
			}
		}
	});
}


<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/jsp/common.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
	  <link rel="stylesheet" href="<%=basePath %>js/layui-v2.5.5/layui/css/layui.css?v=20200101">
  </head>
<body style="padding-top:15px;">

<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-form layui-card-header">
	      <div class="layui-form-item">
	          <div class="layui-inline">
	            <label class="layui-form-label">模块分组</label>
	            <div class="layui-input-inline">
	              <select name="_moduleGroupId">
	              	<c:forEach items="${groups }" var="group">
	              		<option value="${group._id}">${group._name }</option>
	              	</c:forEach>
	              </select>
	            </div>
	          </div>
	          <div class="layui-inline">
	            <label class="layui-form-label">模块名称</label>
	            <div class="layui-input-inline">
	              <input type="text" name="_name" placeholder="请输入模块名称" autocomplete="off" class="layui-input">
	            </div>
	          </div>
	          <div class="layui-inline">
	            <label class="layui-form-label">模块类名</label>
	            <div class="layui-input-inline">
	              <input type="text" name="_classname" placeholder="请输入模块类名" autocomplete="off" class="layui-input">
	            </div>
	          </div>
	          <div class="layui-inline">
          		<button class="layui-btn layui-btn-sm" lay-submit lay-filter="module-tbl-search"><i class="layui-icon layui-icon-search"></i>  查 询</button>
	          </div>
	       </div>
		</div>
		<div class="layui-card-body">
		    <!-- 系统模块原始容器: -->
		    <table id="module-tbl" lay-filter="module-tbl" style="margin:0 5px;padding:0px;"></table>
		</div>
	</div>	
</div>	
    
    <!-- 工具栏模板： -->
    <script type="text/html" id="module-tbl-toolbar">
		<div class="layui-btn-container">
    		<a class="layui-btn layui-btn-sm" lay-event="addUI">添加系统模块</a>
    		<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="refresh">刷新</a>
		</div>
    </script>
    
    <!-- 设置配置模板 -->
    <script type="text/html" id="equipmentTmp">
		{{#  if(d._equipment == 'A'){ }}
			单台
		{{#  } else if(d._equipment == 'B'){ }}
			双台
		{{#  } }}
	</script>
    <!-- 生成数据表模板 -->
    <script type="text/html" id="generateTmp">
		{{#  if(d._generate_flag == '1'){ }}
			<font color='green'>已生成</font>
		{{#  } else{ }}
			<font color='red'>未生成</font>
		{{#  } }}
	</script>
    
    <script type="text/html" id="module-rowtbl-toolbar">
		{{#  if(d._generate_flag == '1'){ }}
      		<a class="layui-btn layui-btn-xs" lay-event="updateModule">编辑</a>
		{{#  } else{ }}
      		<a class="layui-btn layui-btn-xs" lay-event="updateModule">编辑</a>
      		<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="generate">生成数据表</a>
		{{#  } }}
      		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteModule">删除</a>
    </script>
    
    
    
    <!-- 分组菜单 -->
    <script type="text/html" id="group-tbl-toolbar">
      <a class="layui-btn layui-btn-xs" lay-event="selectGroup">确定</a>
    </script>
  
  <!-- 添加用户弹出层 -->
  <div id="add-module-layer" style="display: none; padding: 20px">
    <form id="add-module-form" class="layui-form layui-form-pane">
      <div class="layui-form-item">
        <label class="layui-form-label">所属模块分组</label>
        <div class="layui-input-block">
          <input type="hidden" id="_moduleGroupId" name="_moduleGroupId">
          <input type="text" id="_moduleGroupName" name="_moduleGroupName" onclick="selectModuleGroup();" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">工位</label>
        <div class="layui-input-block">
          <input type="text" id="_name" name="_name" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类名</label>
        <div class="layui-input-block">
          <input type="text" id="_classname" name="_classname" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">顺序号</label>
        <div class="layui-input-block">
          <input type="text" id="_orderId" name="_orderId" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">模块录入标识</label>
        <div class="layui-input-block">
          <input type="text" id="_isenter" name="_isenter" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">同步工序</label>
        <div class="layui-input-block">
          <input type="text" id="_issync" name="_issync" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
	    <label class="layui-form-label">设备配置</label>
	    <div class="layui-input-block">
	      <select name="_equipment" lay-filter="aihao">
	        <option value="A">单台</option>
	        <option value="B">双台</option>
	      </select>
	    </div>
	  </div>
      <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">备注</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" class="layui-textarea" name="_remarks"></textarea>
	    </div>
	  </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="add-module-form-submit">提交</button>
          <%--
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
           --%>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 更新用户弹出层 -->
  <div id="update-module-layer" style="display: none; padding: 20px">
    <form id="update-module-form" class="layui-form layui-form-pane" lay-filter="update-module-form">
      <div class="layui-form-item" style="display: none;">
        <label class="layui-form-label">_id</label>
        <div class="layui-input-block">
          <input type="text" name="_id" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">所属模块分组</label>
        <div class="layui-input-block">
          <input type="hidden" name="_moduleGroupId">
          <input type="text" name="_moduleGroupName" readonly="readonly" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">工位</label>
        <div class="layui-input-block">
          <input type="text" name="_name" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类名</label>
        <div class="layui-input-block">
          <input type="text" name="_classname" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">顺序号</label>
        <div class="layui-input-block">
          <input type="text" name="_orderId" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">模块录入标识</label>
        <div class="layui-input-block">
          <input type="text" id="_isenter" name="_isenter" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">同步工序</label>
        <div class="layui-input-block">
          <input type="text" id="_issync" name="_issync" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
	    <label class="layui-form-label">设备配置</label>
	    <div class="layui-input-block">
	      <select name="_equipment" lay-filter="_equipment">
	        <option value="A">单台</option>
	        <option value="B">双台</option>
	      </select>
	    </div>
	  </div>
      <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">备注</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" class="layui-textarea" name="_remarks"></textarea>
	    </div>
	  </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="update-module-form-submit">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  
  <div id="group" style="display:none;padding:10px 10px;">
    <table id="group-tbl" lay-filter="group-tbl"></table>
  </div>
  
	<!-- layui的引用 js -->
	<script type="text/javascript" src="<%=basePath %>js/layui-v2.5.5/layui/layui.js"></script>
	<!-- 页面JS -->
	<script>
	var basePath = "<%=basePath %>";
	</script>
	<script type="text/javascript" src="<%=basePath %>jsp/system/module/index.js?v=202011306"></script>
  </body>
</html>
狼魂豹速
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值