网站后台经常使用layui的数据表格，样例如下
点击【添加】显示模态窗口
在模态窗口的表单输入数据，点击【确定】，异步提交表单，并关闭模态窗口，同时实现数据表格的重新加载
这些如何实现呢，在thinphp5中，我们一般为分两个页面
首先看显示数据表格的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<{include file="header"}>
</head>
<body>
<!--数据表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!--工具栏-->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addwork">添加工作经历</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>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'{:url("works/getworks")}'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [[
{field:'qzsj', title:'起止时间', width:150, fixed: 'left' }
,{field:'gzcs', title:'工作城市', width:150, fixed: 'left' }
,{field:'gsmc', title:'公司名称', width:300, edit: 'text'}
,{field:'zhiwei', title:'职位', width:200, edit: 'text' }
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'addwork':
layer.open({ //显示模态框
type:2,
title:['新的工作经历','text-align:center;font-size:22px;'],
content:'{:url("works/add")}',
area:['600px','430px'],
btn:['保存','关闭'], //模态框显示两个按钮
yes: function(index, layero){ //点击【保存】时的回调函数
var submit = layero.find('iframe').contents().find("#submitform"); //找到模态窗口中表单中的提交按钮
submit.click(); //触发提交
}
})
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
var data = obj.data
var id = data.id
layer.open({ //与【添加】同理
type:2
,title:['编辑工作经历']
,content:'{:url("edit")}?id='+id
,area:['600px','430px']
,btn:['保存','关闭']
,yes:function(index,layero){
var submit = layero.find('iframe').contents().find("#submitform");
submit.click();
}
})
}
});
});
</script>
</body>
</html>模态窗口的页面代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<{include file="header"}>
</head>
<body>
<form class="layui-form" action="" style="padding-right:30px">
<div class="layui-form-item">
<label class="layui-form-label">所在城市</label>
<div class="layui-input-block">
<input type="text" name="gzcs" lay-verify="required" placeholder="请输入工作时的城市名称，如：北京" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所在公司</label>
<div class="layui-input-block">
<input type="text" name="gsmc" lay-verify="required" placeholder="请输入工作时的公司，如：腾讯" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工作时间</label>
<div class="layui-input-block">
<input type="text" name="qzsj" lay-verify="required" placeholder="请输入工作起止时间，如：2018-2019" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">职位</label>
<div class="layui-input-block">
<input type="text" name="zhiwei" lay-verify="required" placeholder="请输入职位，如：PHP程序员" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">工作情况</label>
<div class="layui-input-block">
<textarea name="gzqk" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<!-- 隐藏提交按钮-->
<div class="layui-form-item layui-hide">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo" id="submitform">立即提交</button>
</div>
</div>
</form>
<script>
//Demo
layui.use(['form', 'jquery', 'layer'], function () {
var form = layui.form,
$ = layui.jquery,
layer = layui.layer;
//监听提交
form.on('submit(formDemo)', function (data) {
var field = data.field; //获取提交的字段
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
//提交 Ajax 成功后，关闭当前弹层并重载表格
$.post('{:url("do_add")}', field, function (ret) {
if (ret.code == 0) { //添加失败
layer.msg(ret.msg, {icon: 5})
} else { //添加成功
layer.msg(ret.msg, {icon: 6}, function () {
parent.layui.table.reload('test'); //重载表格
parent.layer.close(index); //再执行关闭模态窗口
})
}
})
return false
});
});
</script>
</body>
</html>有关它们之间的分工与协调，认真看代码中的注释部分
