layui.弹出层的按钮没有反应

提问 已结 8 138
GuderianLin
GuderianLin 2020-2-8
悬赏:20飞吻
版本:layui 最新 浏览器:谷歌
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.all.js"></script>
<script src="js/jquery-3.3.1.js"></script>

<%-- 复选框居中--%>
<style>
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
top: 50%;
transform: translateY(-50%);
}
</style>

<title>生物实验室总览</title>
</head>
<body>

<div>
<h1 align="center">生物实验室列表</h1>
</div>

<table class="layui-hide" id="test" lay-filter="test" lay-data="{height:'full-20'}"></table>

<%--隐藏表单——用于添加用户弹窗--%>
<form class="layui-form" id="add_form" method="post">
<%--信息栏--%>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">实验室编号</label>
<div class="layui-input-block">
<input type="text" name="lab_id" required lay-verify="required" placeholder="请输入实验室编号" class="layui-input" >
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">实验室名称</label>
<div class="layui-input-inline">
<input type="text" name="lab_name" required lay-verify="required" placeholder="请输入实验室名称" class="layui-input" >
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">可容纳人数</label>
<div class="layui-input-inline">
<input type="text" name="lab_peoplenum" required lay-verify="required" placeholder="请输入实验室可容纳人数" class="layui-input" >
</div>
</div>
</div>
<%--功能栏--%>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>




<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<button class="layui-btn layui-btn-sm" lay-event="add">新增实验室</button>
</div>
</script>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="layui/layui.all.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['table', 'form', 'layer'], function(){
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
var $ = layui.$;

//温馨提示:默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据。
//详见:https://www.layui.com/doc/modules/table.html#totalRow
table.render({
elem: '#test'
,url:'/getBiologyLabAll'
,toolbar: '#toolbarDemo'
,title: '生物实验室列表'
,totalRow: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', fixed: 'left', unresize: true, totalRowText: '合计'}
,{field:'biologylab_id', title:'实验室编号' }
,{field:'biologylab_name', title:'实验室名称' }
,{field:'biologylab_peoplenum', title:'实验室可容纳人数', totalRow: true }
,{fixed: 'right', title:'操作', toolbar: '#barDemo' }
]]
,page: true
,even: true
});

//工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
case "add" :
layer.open({
title: '新增实验室',
/*如果是外部的html,type2,内部,type1*/
type: 1,
btnAlign: 'c',
area: ['400px', '400px'],
content: $("#add_form").html()
//未做的是去监听表单提交,给后台发送ajax请求
});
};
});

//监听提交
form.on('submit(demo1)', function(data){
$.ajax({
url:'./AddLabImpl',
method:'post',
data:data.field,
dataType:'JSON',
success:function(res){
if(res.code='0'){
parent.closeIframe(res.msg);
}
else
alert(res.msg);
},
error:function (data) {

}
}) ;
});

})
</script>



</body>
</html>


选择在当前页面隐藏起表单,随后根据当前Table中的工具按钮,弹出表单。
但是弹出表单中的按钮无效。
回帖
  • 你按钮上面的监听标识没有写
    0 回复
  • EiSCN
    2020-2-8
    form.on('submit(demo1)', function(data){
    你这提交时监听的是demo1,你按钮设置的是*
    <script src="layui/layui.all.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use(['table', 'form', 'layer'], function(){
    还有你上面加载了all.js后面又这么加载没意义
    https://www.layui.com/doc/#allmodules
    具体看这里
    0 回复
  • 弹窗成功后 再渲染form.on的监听
    0 回复
  • 而且你加载的是layui.all还用模块化写 本身就不对的,撸码的时候多看下F12控制台 100%报错
    0 回复
  • @DJ李二狗 layui.all全模块到底如何加装啊?我按照官方文档写,怎么不生效?
    0 回复
  • @莫名其妙78
    <script src="../layui/layui.all.js"></script>
    <script>
    ;!function(){
    //无需再执行layui.use()方法加载模块,直接使用即可
    var form = layui.form
    ,layer = layui.layer;

    //…
    }();
    </script>
    0 回复
  • 这样吗?
    <script src="../layui/layui.all.js"></script> 
    <script>
    ;!function(){
    //无需再执行layui.use()方法加载模块,直接使用即可
    var form = layui.form
    ,layer = layui.layer
    ,table = layui.table;

    table.render({
    elem: '#test'
    ,url:'/getBiologyLabAll'
    ,toolbar: '#toolbarDemo'
    ,title: '生物实验室列表'
    ,totalRow: true
    ,cols: [[
    {type: 'checkbox', fixed: 'left'}
    ,{field:'id', title:'ID', fixed: 'left', unresize: true, totalRowText: '合计'}
    ,{field:'biologylab_id', title:'实验室编号' }
    ,{field:'biologylab_name', title:'实验室名称' }
    ,{field:'biologylab_peoplenum', title:'实验室可容纳人数', totalRow: true }
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo' }
    ]]
    ,page: true
    ,even: true
    })
    //…
    }();
    </script>
    0 回复
  • @莫名其妙78 是的
    0 回复