摘要：<!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>代码太多，其中一个。
layui其实就是能够帮助快速的搭建。根据自己需求去找相应的模块去拷贝，然后修改。
批改老师：查无此人批改时间：2019-01-17 09:03:58
老师总结：完成的不错。框架就是为了让程序员方便的。不过缺点就是，使程序员基础不扎实。以后上手后，可以在复习基础。加油
