摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>功夫明星列表</title> <link rel="stylesheet" type="text/css&quo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>功夫明星列表</title>
<link rel="stylesheet" type="text/css" href="D:/my-mi/layui/css/layui.css">
<script type="text/javascript" src="D:/my-mi/layui/layui.js"></script>
<style type="text/css">
header{width: 100%;border-bottom: 1px solid #ff6b00;line-height: 30px;}
header span{margin-left: 10px;background: #ff6b00;color: #fff;}
header button{float: right;}
</style>
</head>
<body style="padding: 10px;">
<header>
<span>功夫明星列表</span>
<button class="layui-btn layui-btn-sm" onclick="add()" >添加</button>
</header>
<table>
<thead>
<tr>
<th lay-data="{field:'username', width:80}">姓名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city', width:80}">年龄</th>
<th lay-data="{field:'sign', width:160}">代表作品</th>
<th lay-data="{field:'classify', width:80}">职业</th>
<th lay-data="{field:'wealth', width:135, sort: true}">民族</th>
<th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">操作</th>
<th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
</tr>
</thead>
<tbody>
<tr>
<td>李小龙</td>
<td>男</td>
<td>32</td>
<td>精武门</td>
<td>格斗家</td>
<td>汉族</td>
<td>
<!-- <div> -->
<button class="layui-btn layui-btn-sm" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-sm" onclick="del()">删除</button>
<!-- </div> -->
</td>
<td>人生似修行</td>
</tr>
<tr>
<td>成龙</td>
<td>男</td>
<td>64</td>
<td>醉拳</td>
<td>导演</td>
<td>汉族</td>
<td>
<button class="layui-btn layui-btn-sm" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-sm" onclick="del()">删除</button>
</td>
<td>人生似修行</td>
</tr>
<tr>
<td>甄子丹</td>
<td>男</td>
<td>55</td>
<td> 叶问</td>
<td>动作指导</td>
<td>汉族</td>
<td>
<button class="layui-btn layui-btn-sm" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-sm" onclick="del()">删除</button>
</td>
<td>人生似修行</td>
</tr>
<tr>
<td>李连杰</td>
<td>男</td>
<td>55</td>
<td>少林寺</td>
<td>武术运动员</td>
<td>汉族</td>
<td>
<button class="layui-btn layui-btn-sm" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-sm" onclick="del()">删除</button>
</td>
<td>人生似修行</td>
</tr>
</tbody>
</table>
<script>
layui.use('layer', function(){
var layer = layui.layer;
});
function del(){
layer.confirm('是否确定删除？', {
icon:3,
btn: ['确定', '取消'] //可以无限个按钮
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
function add(){
layer.open({
type: 2,
area: ['430px','460px'],
content: ['gf-add.html', 'no']//这里content是一个普通的String
});
}
</script>
</body>
</html>弹出页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui搭建</title>
<link rel="stylesheet" type="text/css" href="D:/my-mi/layui/css/layui.css">
<script type="text/javascript" src="D:/my-mi/layui/layui.js"></script>
</head>
<body >
<div style="margin:0px auto ;padding: 20px;background: #fff;width: 400px;border-radius: 5px;box-shadow: 3px 3px #ccc;">
<form action="">
<p style="border-bottom: 1px solid #ccc;padding-bottom: 10px;margin-bottom: 10px;">功夫明星添加</p>
<div>
<label>姓名</label>
<div>
<input type="text" name="" placeholder="请输入用户名">
</div>
</div>
<div>
<label>性别</label>
<div>
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div>
<label>年龄</label>
<div>
<input type="text" name="" placeholder="请输入年龄">
</div>
</div>
<div>
<label>代表作品</label>
<div>
<input type="text" name="" placeholder="请输入代表作品">
</div>
</div>
<div>
<label>职业</label>
<div>
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">格斗家</option>
<option value="1">武术家</option>
<option value="2">导演</option>
<option value="3">演员</option>
<option value="4">动作指导</option>
</select>
</div>
</div>
<div>
<label>民族</label>
<div>
<input type="radio" name="sex1" value="汉" title="汉" checked="">
<input type="radio" name="sex1" value="外" title="外籍" >
</div>
</div>
<div>
<div>
<button lay-submit="" lay-filter="demo1">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
});
</script>
</html>
批改老师：灭绝师太批改时间：2019-01-15 08:57:01
老师总结：完成的不错！layui就是熟悉组件，学会看文档，多多练习！
