头部添加功能
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
</div>
</script>
下面是html代码增加一个button(按钮)及列表完成代码
<form class="layui-form" action="" id="addForm" style="display:none" lay-filter="add" enctype="multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" lay-verify="title" autocomplete="off" placeholder="用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" id="org_email" name="org_email" lay-verify="title" autocomplete="off" placeholder="邮箱" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">组织</label>
<div class="layui-input-block">
<input type="text" id="company" name="company" lay-verify="title" autocomplete="off" placeholder="组织" class="layui-input">
</div>
</div>
<div class="layui-form-item" id="sub">
<button style="display:block;margin:0 auto" class="layui-btn" type="button" lay-submit lay-filter="demo2" id="addsub">提交</button>
</div>
</form>
script段代码ajax后端传值,调用接口传入数据库
头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
add();
break;
};
});
//#设置弹窗
function add(){
layer_index= layer.open({
type: 1, //可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
title: "添加", //数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
area: ['400px', '300px'], //所打开页面大小
content:$("#addForm"), //内容
//关闭操作
cancel: function(){
layer.close(layer_index);
$("#addForm")[0].reset();
$('#demoe1').attr('src', "");
}
});
};
//from提交表单
layui.use(['form', 'laydate'], function(){
form = layui.form;
form.render();
//表单取值
form.on('submit(demo2)', function(data){
console.log(JSON.stringify(data.field));
$.ajax({
url:'/get_mas',
method:'POST',
data:data.field,
dataType:'JSON',
success:function(res){
if(res.code === 0){
console.log(res);
layer.msg("添加成功");
window.location.reload()
}else{
layer.msg("添加失败");
$("#addForm")[0].reset();
form.render();
}
},
error:function (res) {
layer.msg("网络错误");
$("#addForm")[0].reset();
form.render();
}
}) ;
layer.close(layer_index);
});
});