You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
13 KiB
293 lines
13 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>学员风采</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">
|
|
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
|
|
</head>
|
|
<style>
|
|
html,body{
|
|
height:99.8%;
|
|
}
|
|
.layui-form-item {
|
|
margin-bottom: 0px;
|
|
}
|
|
.layui-btn-container .layui-btn {
|
|
margin-right: 10px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.layui-input, .layui-textarea {
|
|
display: block;
|
|
height: 30px;
|
|
padding-left: 10px;
|
|
}
|
|
input:before {
|
|
content: attr(placeholder); //强制给placeholder属性
|
|
color: #aaa; //修改一下placeholder颜色
|
|
}
|
|
.layui-form-select{
|
|
width: 150px;
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
}
|
|
复制代码
|
|
</style>
|
|
<body>
|
|
<div class="layui-col-xs9 layui-col-md1" style="height: 100%">
|
|
<div class="layui-panel" style="height: 100%">
|
|
<ul class="layui-menu" id="left">
|
|
<li lay-options="{id: 1}" class="layui-menu-item-checked">
|
|
<div class="layui-menu-body-title">学员风采</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs9 layui-col-md11 show1 othertables" style="height: 100%">
|
|
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">学员列表</li>
|
|
<li>添加学员</li>
|
|
</ul>
|
|
<div class="layui-tab-content" style="height: 100px;">
|
|
<div class="layui-tab-item layui-show"><table class="layui-hide" id="classlist" lay-filter="classlist" style="padding:25px;"></table></div>
|
|
<div class="layui-tab-item">
|
|
<blockquote class="layui-elem-quote layui-text">
|
|
温馨提示两小点： 1. <font style="color:#01aaed;">首次添加学员需要添加先添加教学板块？</font>2. <font style="color:#01aaed;">带有红色”*“的为必填项；</font>
|
|
</blockquote>
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
|
<legend>学员添加</legend>
|
|
</fieldset>
|
|
|
|
<form class="layui-form" action="">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">学员名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="title" 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">
|
|
<select name="class" lay-filter="class">
|
|
<option value="">请选择教学板块</option>
|
|
<?foreach($class as $key => $val){?>
|
|
<option value="<?=$val['id']?>"><?=$val['title']?></option>
|
|
<?}?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">学员图片</label>
|
|
<div class="layui-input-block">
|
|
<button type="button" class="layui-btn" id="test1">上传图片</button>
|
|
<div class="layui-upload-list">
|
|
<img class="layui-upload-img" id="demo1" width="200px">
|
|
<p id="demoText"></p>
|
|
</div>
|
|
<div style="width: 95px;">
|
|
<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
|
|
<div class="layui-progress-bar" lay-percent=""></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="img" id="img">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">上课时间</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input" name="classtime" id="test9" placeholder=" - ">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">课程经历</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="experienced" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder='学员课程经历（多个用"-"连接）例如：音乐人-制作人-中国好声音音乐总监' 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 placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
|
|
</div>
|
|
</div>
|
|
<!--<div class="layui-form-item layui-form-text">
|
|
<label class="layui-form-label">编辑器</label>
|
|
<div class="layui-input-block">
|
|
<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
|
|
</div>
|
|
</div>-->
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demoteacher">立即提交</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/layui/layui.js" charset="utf-8"></script>
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
|
|
<script type="text/html" id="imgshow">
|
|
<!-- 这里的 checked 的状态只是演示 -->
|
|
<img src="/{{d.img}}">
|
|
</script>
|
|
<script type="text/html" id="tool">
|
|
<!-- 这里的 checked 的状态只是演示 -->
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
</script>
|
|
<script>
|
|
layui.use(['form','table','dropdown','laydate','element','upload'], function(){
|
|
var table = layui.table
|
|
,dropdown = layui.dropdown
|
|
,laydate = layui.laydate
|
|
,upload = layui.upload
|
|
,element = layui.element
|
|
,form = layui.form,
|
|
$ = layui.jquery;
|
|
form.render();
|
|
table.render({
|
|
elem: '#classlist'
|
|
,url: '/admin_student/teacherlist'
|
|
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
|
,toolbar: '#toolbarDemocl'
|
|
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
|
|
title: '提示'
|
|
,layEvent: 'LAYTABLE_TIPS'
|
|
,icon: 'layui-icon-tips'
|
|
}]
|
|
,page:true
|
|
,cols: [[
|
|
{field:'id', width:120, title: '序号', sort: true}
|
|
,{field:'name', width:200, title: '学员姓名'}
|
|
,{field:'title', width:120, title: '课程板块', sort: true}
|
|
,{templet: '#imgshow', width:120,title: '学员头像'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
|
|
,{field:'content', title: '学员说明'}
|
|
,{field:'created', title: '添加时间'}
|
|
,{toolbar: '#tool',field:'wealth',width:120, title: '操作', sort: true}
|
|
]]
|
|
});
|
|
table.on('tool(classlist)', function(obj){
|
|
console.log(obj)
|
|
var data = obj.data;
|
|
if(obj.event === 'del'){
|
|
layer.confirm('确定要删除数据嘛', function(index){
|
|
$.post('/admin_index/delete',{tablename:'student',id:data.id},function(obj){
|
|
if(obj.status != 1){
|
|
return layer.msg(obj.msg);
|
|
}else{
|
|
//示范一个公告层
|
|
layer.open({
|
|
type: 1
|
|
,title: false //不显示标题栏
|
|
,closeBtn: false
|
|
,area: '300px;'
|
|
,shade: 0.8
|
|
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
,btn: '返回列表'
|
|
,btnAlign: 'c'
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">删除成功</div>'
|
|
,yes: function(){
|
|
history.go(0)
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
laydate.render({
|
|
elem: '#test9'
|
|
,type: 'time'
|
|
,range: true
|
|
});
|
|
//监听提交
|
|
form.on('submit(demoteacher)', function(data){
|
|
var datas = data.field
|
|
datas.type=1
|
|
$.post('/admin_student/teachersave',datas,function(obj){
|
|
if(obj.status != 1){
|
|
return layer.msg(obj.msg);
|
|
}else{
|
|
//示范一个公告层
|
|
layer.open({
|
|
type: 1
|
|
,title: false //不显示标题栏
|
|
,closeBtn: false
|
|
,area: '300px;'
|
|
,shade: 0.8
|
|
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
,btn: '返回列表'
|
|
,btnAlign: 'c'
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">添加成功</div>'
|
|
,yes: function(){
|
|
history.go(0)
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
//菜单点击事件
|
|
dropdown.on('click(left)', function(options){
|
|
var thisElem = $(this);
|
|
console.log(thisElem, options);
|
|
$('.othertables').hide();
|
|
$('.show'+options.id).show();
|
|
});
|
|
//常规使用 - 普通图片上传
|
|
var uploadInst = upload.render({
|
|
elem: '#test1'
|
|
,url: '/admin_index/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
|
|
,before: function(obj){
|
|
//预读本地文件示例，不支持ie8
|
|
obj.preview(function(index, file, result){
|
|
$('#demo1').attr('src', result); //图片链接（base64）
|
|
});
|
|
|
|
element.progress('demo', '0%'); //进度条复位
|
|
layer.msg('上传中', {icon: 16, time: 0});
|
|
}
|
|
,done: function(res){
|
|
//如果上传失败
|
|
if(res.status != 1){
|
|
return layer.msg('上传失败');
|
|
}
|
|
$('#img').val(res.data); //置空上传失败的状态
|
|
//上传成功的一些操作
|
|
//……
|
|
$('#demoText').html(''); //置空上传失败的状态
|
|
}
|
|
,error: function(){
|
|
//演示失败状态，并实现重传
|
|
var demoText = $('#demoText');
|
|
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
|
demoText.find('.demo-reload').on('click', function(){
|
|
uploadInst.upload();
|
|
});
|
|
}
|
|
//进度条
|
|
,progress: function(n, elem, e){
|
|
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
|
|
if(n == 100){
|
|
layer.msg('上传完毕', {icon: 1});
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|