使用layui踩过的1、2、3、4、5、6、7、8、9……次坑
问题:
- 将Layui的数据表格放到from表单中,数据表格中的按钮(弹出弹出层)点击后弹出层闪退 。。。
分析:
- 一开始以为Layui的数据表格可能和form表单有冲突,或者弹出层哪里设置不对,但是仔细检查发现没有写错,抱着试试的心态将数据表格和从前一样放到form表单的外面,发现居然可以用了!
- 后来发现原来我复制过来数据表格的代码中使用的是
<button></button>
标签(之前form和数据表格是分离的),点击的时候会触发默认事件,而form的action我没填,所以就是弹出层闪退……
解决方法:
- 将数据表格中的
<button></button>
标签全部换成<a></a>
标签 - 修改先
<form class="layui-form layui-form-pane" action=""> <div class="layui-form-item"> <div class="layui-inline"> <!-- xxxxxxxxxx --> </div> <div class="layui-inline"> <!-- xxxxxxxxxx --> </div> <!--layui数据表格--> <table class="layui-hide" id="teamTableId" lay-filter="teamTableFilter"></table> <div class="layui-inline"> <!-- xxxxxxxxxx --> </div> <div class="layui-form-item" style="position: relative; left: 498px;"> <button class="layui-btn" lay-submit="" lay-filter="form">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <!--表格头部--> <script type="text/html" id="tablebar"> <div class="layui-btn-group layui-inline"> <button id="addstudent" class="layui-btn layui-btn-normal data-add-btn" data-method="addstudent">添加</button > </div> </script> <!--自定义的列模板--> <script type="text/html" id="currentTableBar"> <button class="layui-btn layui-btn-xs data-count-edit" data-method="modifystudent" lay-event="edit"><修改</button > <button class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</button > </script>
- 修改后
<!-- xxxxxxxxxx --> <!--表格头部--> <script type="text/html" id="tablebar"> <div class="layui-btn-group layui-inline"> <a id="addstudent" class="layui-btn layui-btn-normal data-add-btn" data-method="addstudent">添加</a> </div> </script> <!--自定义的列模板--> <script type="text/html" id="currentTableBar"> <a class="layui-btn layui-btn-xs data-count-edit" data-method="modifystudent" lay-event="edit"><修改</a> <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a> </script>