|
|
|
|
@ -6,7 +6,7 @@
|
|
|
|
|
<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" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
|
|
|
|
|
<link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
|
|
|
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
@ -15,9 +15,8 @@
|
|
|
|
|
|
|
|
|
|
<script type="text/html" id="toolbarDemo">
|
|
|
|
|
<div class="layui-btn-container">
|
|
|
|
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
|
|
|
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
|
|
|
|
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
|
|
|
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加目录</button>
|
|
|
|
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">添加课程</button>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/html" id="barDemo">
|
|
|
|
|
@ -25,120 +24,66 @@
|
|
|
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!--<script src="layui/layui.js" charset="utf-8"></script>-->
|
|
|
|
|
<!--<!– 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 –>-->
|
|
|
|
|
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--<script>-->
|
|
|
|
|
<!-- layui.use('table', function(){-->
|
|
|
|
|
<!-- var table = layui.table;-->
|
|
|
|
|
|
|
|
|
|
<!-- //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。-->
|
|
|
|
|
<!-- //详见：http://www.ilayuis.com/doc/modules/table.html#totalRow-->
|
|
|
|
|
<!-- table.render({-->
|
|
|
|
|
<!-- elem: '#test'-->
|
|
|
|
|
<!-- ,url:'http://localhost:8080/api/course/queryCourse'-->
|
|
|
|
|
<!-- ,toolbar: '#toolbarDemo'-->
|
|
|
|
|
<!-- ,title: '课程数据表'-->
|
|
|
|
|
<!-- ,totalRow: true-->
|
|
|
|
|
<!-- ,cols: [[-->
|
|
|
|
|
<!-- {type: 'checkbox', fixed: 'left'}-->
|
|
|
|
|
<!-- ,{field:'id', title:'编号', width:120, sort: true, }-->
|
|
|
|
|
<!-- ,{field:'courseName', title:'课程名称', width:120}-->
|
|
|
|
|
<!-- ,{field:'courseBrief', title:'课程简介', width:120}-->
|
|
|
|
|
<!-- ,{field:'courseUrl', title:'超链接', width:120}-->
|
|
|
|
|
<!-- ,{field:'dirName', title:'归属目录', width:120}-->
|
|
|
|
|
<!-- ,{field:'courseIcon', title:'课程图标', width:120}-->
|
|
|
|
|
<!-- ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}-->
|
|
|
|
|
<!-- ]]-->
|
|
|
|
|
<!-- ,page: true-->
|
|
|
|
|
<!-- });-->
|
|
|
|
|
|
|
|
|
|
<!-- //工具栏事件-->
|
|
|
|
|
<!-- table.on('toolbar(test)', function(obj){-->
|
|
|
|
|
<!-- var checkStatus = table.checkStatus(obj.config.id);-->
|
|
|
|
|
<!-- switch(obj.event){-->
|
|
|
|
|
<!-- case 'getCheckData':-->
|
|
|
|
|
<!-- var data = checkStatus.data;-->
|
|
|
|
|
<!-- layer.alert(JSON.stringify(data));-->
|
|
|
|
|
<!-- break;-->
|
|
|
|
|
<!-- case 'getCheckLength':-->
|
|
|
|
|
<!-- var data = checkStatus.data;-->
|
|
|
|
|
<!-- layer.msg('选中了：'+ data.length + ' 个');-->
|
|
|
|
|
<!-- break;-->
|
|
|
|
|
<!-- case 'isAll':-->
|
|
|
|
|
<!-- layer.msg(checkStatus.isAll ? '全选': '未全选')-->
|
|
|
|
|
<!-- break;-->
|
|
|
|
|
<!-- };-->
|
|
|
|
|
<!-- });-->
|
|
|
|
|
<!-- });-->
|
|
|
|
|
<!--</script>-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="layui/layui.js" charset="utf-8"></script>
|
|
|
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- 引入jquery-3.5.1.min.js -->
|
|
|
|
|
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
layui.use('table', function(){
|
|
|
|
|
layui.use('table', function () {
|
|
|
|
|
var table = layui.table;
|
|
|
|
|
|
|
|
|
|
//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
|
|
|
|
|
//详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
|
|
|
|
|
table.render({
|
|
|
|
|
elem: '#test'
|
|
|
|
|
,url:'http://localhost:8080/api/course/queryCourse'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/
|
|
|
|
|
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
|
|
|
|
|
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
|
|
|
|
|
title: '提示'
|
|
|
|
|
,layEvent: 'LAYTABLE_TIPS'
|
|
|
|
|
,icon: 'layui-icon-tips'
|
|
|
|
|
}]
|
|
|
|
|
,title: '课程数据表'
|
|
|
|
|
,cols: [[
|
|
|
|
|
, url: 'http://localhost:8080/api/course/queryCourse'
|
|
|
|
|
, toolbar: '#toolbarDemo'
|
|
|
|
|
, title: '课程中心'
|
|
|
|
|
, totalRow: true
|
|
|
|
|
, parseData: function (res) {
|
|
|
|
|
console.log('data', res)
|
|
|
|
|
return {
|
|
|
|
|
"code": res.code, //解析接口状态
|
|
|
|
|
"count": res.count, //解析总页数
|
|
|
|
|
"msg": res.msg, //解析提示文本
|
|
|
|
|
"data": res.data.list //解析数据列表
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
, response: {
|
|
|
|
|
statusName: 'code', //规定返回的状态码字段为code
|
|
|
|
|
statusCode: 200 //规定成功的状态码为200
|
|
|
|
|
}
|
|
|
|
|
, cols: [[
|
|
|
|
|
{type: 'checkbox', fixed: 'left'}
|
|
|
|
|
,{field:'id', title:'编号', width:120, sort: true, }
|
|
|
|
|
,{field:'courseName', title:'课程名称', width:120}
|
|
|
|
|
,{field:'courseBrief', title:'课程简介', width:120}
|
|
|
|
|
,{field:'courseUrl', title:'超链接', width:120}
|
|
|
|
|
,{field:'dirName', title:'归属目录', width:120}
|
|
|
|
|
,{field:'courseIcon', title:'课程图标', width:120}
|
|
|
|
|
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
|
|
|
|
|
, {field: 'id', title: '序号', width: 300, sort: true,}
|
|
|
|
|
, {field: 'courseName', title: '课程名称', width: 300}
|
|
|
|
|
, {field: 'courseBrief', title: '课程简介', width: 300}
|
|
|
|
|
, {field: 'courseUrl', title: '超链接', width: 300}
|
|
|
|
|
, {field: 'dirName', title: '归属目录', width: 300}
|
|
|
|
|
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
|
|
|
|
|
]]
|
|
|
|
|
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
|
|
|
|
|
//layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
|
|
|
|
layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
|
|
|
|
,curr: 1 //设定初始在第 1 页
|
|
|
|
|
,groups: 3 //只显示 3 个连续页码
|
|
|
|
|
,first:"首页" //显示首页
|
|
|
|
|
,last:"尾页" //显示尾页
|
|
|
|
|
,limit: 2 //每页显示两条数据（和后端保持一致）
|
|
|
|
|
//,limits: [1,3,5]
|
|
|
|
|
}
|
|
|
|
|
, page: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//头工具栏事件
|
|
|
|
|
table.on('toolbar(test)', function(obj){
|
|
|
|
|
//工具栏事件
|
|
|
|
|
table.on('toolbar(test)', function (obj) {
|
|
|
|
|
var checkStatus = table.checkStatus(obj.config.id);
|
|
|
|
|
switch(obj.event){
|
|
|
|
|
switch (obj.event) {
|
|
|
|
|
case 'getCheckData':
|
|
|
|
|
var data = checkStatus.data;
|
|
|
|
|
layer.alert(JSON.stringify(data));
|
|
|
|
|
break;
|
|
|
|
|
case 'getCheckLength':
|
|
|
|
|
var data = checkStatus.data;
|
|
|
|
|
layer.msg('选中了：'+ data.length + ' 个');
|
|
|
|
|
layer.msg('选中了：' + data.length + ' 个');
|
|
|
|
|
break;
|
|
|
|
|
case 'isAll':
|
|
|
|
|
layer.msg(checkStatus.isAll ? '全选': '未全选');
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
//自定义头工具栏右侧图标 - 提示
|
|
|
|
|
case 'LAYTABLE_TIPS':
|
|
|
|
|
layer.alert('这是工具栏右侧自定义的一个图标按钮');
|
|
|
|
|
layer.msg(checkStatus.isAll ? '全选' : '未全选')
|
|
|
|
|
break;
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//监听行工具事件
|
|
|
|
|
@ -150,18 +95,16 @@
|
|
|
|
|
//obj.del();//删除表结构
|
|
|
|
|
layer.close(index);
|
|
|
|
|
|
|
|
|
|
//获取要删除的歌曲的id
|
|
|
|
|
var deleteMusicId = data.musicId;
|
|
|
|
|
//获取要删除的服务的id
|
|
|
|
|
var deleteCourseId = data.id;
|
|
|
|
|
|
|
|
|
|
//发送Ajax到后台，进行删除操作
|
|
|
|
|
$.get("music/after/delete.do", { "musicId": deleteMusicId},
|
|
|
|
|
$.get("http://localhost:8080/api/course/delCourseById", { "id": deleteCourseId},
|
|
|
|
|
function(data){
|
|
|
|
|
if("success" == data){
|
|
|
|
|
if("success" == data.msg){
|
|
|
|
|
location.reload();//重新加载当前页面
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
} else if(obj.event === 'edit'){
|
|
|
|
|
// layer.prompt({
|
|
|
|
|
@ -178,7 +121,10 @@
|
|
|
|
|
selectOne(data);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
Gitee