github下载地址：https://github.com/SortableJS/Sortable
个人百度网盘下载地址：
链接：https://pan.baidu.com/s/1Y4Od-Ysgs2xliTUjb16S-A
提取码：emvt
业务逻辑：
从右边全部课程区域拖拽一个副本到左边区域，右边数据源区域不能产生排序，左边内容接收区分好几个tab，每个tab内的课程ID唯一且换不影响，每个tab内的拖拽组件可排序、删除、分页。
页面引入JS：
<script src="/manager_assets/sortable/Sortable.js"></script>
页面代码：
【全部课程区域】
<div id="items"></div> //全部课程
var sortable = Sortable.create(document.getElementById('items'), {
group: {
name: 'advanced',
pull: 'clone',//pull用来定义从这个列表容器移动出去的设置，可设置值：true/false/'clone'/function
put: false //put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function 这里用false表示列表容器不可以从其他列表容器内放入列表单元；
},
sort: false,//设置排序不可用
onEnd: function(evt, obj) {//列表单元拖放结束后的回调函数
$(evt.item).css("border", ""); //删除表示重复的样式
},
});【左边内容接收区域】
（用的是layUI）
<div class="course-container" style="background: #fff; width: 55%; height: 95%; left: 0px; border: 1px solid #000000;">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">会员最新上架</li>
<li>即将上架</li>
<li>推荐课程</li>
<li>热门课程</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div id="vpiNewTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="vpiNewTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
<div class="layui-tab-item">
<div id="comingTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="comingTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
<div class="layui-tab-item">
<div id="recommendTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="recommendTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
<div class="layui-tab-item">
<div id="hotTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="hotTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
</div>
</div>
</div> //会员最新上架sortable
var vipSortable = Sortable.create(document.getElementById('vpiNewTab'), {
group: {
name: 'advanced',
pull: true,
put: function(evt, from, item) {//当有新组件拖过来该容器，调用该函数
//去重
return norepeat(evt, item,3);
},
},
onAdd: function(evt) { //拖拽完成调用该函数
//添加组件到会员最新上架Tab
addItem(evt.newIndex, evt.item, evt.to, 3);
},
onUpdate: function(evt) {// 列表单元在列表容器中的排序发生变化后的回调函数
//容器内只有一个组件的时候拖拉不会触发该函数
//拖拽更新排序位置
sortCourses(evt,3);
},
});参考资料：
https://segmentfault.com/a/1190000008209715?utm_source=tag-newest
https://www.jb51.net/article/96446.htm
该页面全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程排序</title>
</head>
<style>
body {
-webkit-text-size-adjust: none
}
.course-container {
position: absolute !important;
margin: 20px;
top: 0px;
}
.all-course-style {
/* border-bottom:1px solid #000000; */
font-weight: bold;
font-size: 125%;
padding: 20px 20px 10px 20px;
}
.hr-style {
/*内嵌水平线*/
width: 100%;
margin: 1 auto;
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.allc-style {
margin-left: 5px;
margin-right: 5px;
}
div.imgcard {
width: 130px;
height: 145px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
display: inline-block;
position: relative;
}
.Pagging {
left: calc(50% - 162px)
}
.card-word {
font-size: 80%;
text-align: left;
margin: 3px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 35px;
}
.course-price-status {
color: #F5C63B;
}
.course-bottom {
color: #909399;
font-size: 12px;
transform: scale(0.833333);
}
.card-img {
width: 130px;
height: 70px;
}
</style>
<body>
<div id="advanced">
<!-- 左边容器 -->
<div class="course-container"
style="background: #fff; width: 55%; height: 95%; left: 0px; border: 1px solid #000000;">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">会员最新上架</li>
<li>即将上架</li>
<li>推荐课程</li>
<li>热门课程</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div id="vpiNewTab"
style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="vpiNewTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
<div class="layui-tab-item">
<div id="comingTab"
style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="comingTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
<div class="layui-tab-item">
<div id="recommendTab"
style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="recommendTabPagging" class="Pagging"
style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
<div class="layui-tab-item">
<div id="hotTab"
style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div>
<div id="hotTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>
</div>
</div>
</div>
</div>
<!-- 右边容器 -->
<div class="course-container"
style="background: #fff; width: 41%; height: 95%; right: 0px; border: 1px solid #000000;">
<div class="all-course-style">
全部课程
<hr class="hr-style">
</div>
<div class="allc-style">
<div class="layui-inline" style="width: 100%">
<label class="layui-form-label">课程名称：</label>
<div class="layui-input-inline">
<input id="coursename" lay-verify="required|phone" autocomplete="off" class="layui-input"
style="height: 30px;">
</div>
<button class="layui-btn layui-btn-sm" style="margin-left: 30px;" onclick="allCourses(1)">搜索</button>
</div>
<div id="items"></div>
<div id="allCoursePagging" class="Pagging" style="position: absolute; bottom:0px;"></div>
</div>
</div>
</div>
</body>
<script src="***/js/jquery.min.js"></script>
<script src="***/sortable/Sortable.js"></script>
<script src="***/layui/layui.js"></script>
<link rel="stylesheet" href="***/layui/css/layui.css">
<script src="***/layui/lay/modules/layer.js"></script>
<link rel="stylesheet" href="***/layui/css/modules/layer/default/layer.css">
<script>
var vipNewCIds = new Array();
var comingCIds = new Array();
var recommendCIds = new Array();
var hotCIds = new Array();
var loadComing = 0;
var loadRecommend = 0;
var loadHot = 0;
var origin = window.location.origin;
var paging = {
currentPage: 1,
pageSize: 12,
total: 0
}
var pagingl = {
currentPage: 1,
pageSize: 15,
total: 0
}
var pagingComing = {
currentPage: 1,
pageSize: 15,
total: 0
}
var pagingRecommend = {
currentPage: 1,
pageSize: 15,
total: 0
}
var pagingHot = {
currentPage: 1,
pageSize: 15,
total: 0
}
var comingpage = null;
var recommendpage = null;
var hotpage = null;
layui.use('element', function () {
var element = layui.element;
//一些事件监听
element.on('tab(docDemoTabBrief)', function (data) {
//console.log(this); //当前Tab标题所在的原始DOM元素
//console.log(data.index); //得到当前Tab的所在下标
//console.log(data.elem); //得到当前的Tab大容器
if (data.index == 1) {//即将上架
if (loadComing == 0) {
//已load
loadComing = 1;
//list数据
listTabCourses(4, $("#comingTab"));
//初始化即将上架的分页
layui.use('laypage', function () {
comingpage = layui.laypage;
//执行一个laypage实例
comingpage.render({
elem: 'comingTabPagging', //注意，这里的 test1 是 ID，不用加 # 号
count: pagingComing.total, //数据总数，从服务端得到
limit: pagingComing.pageSize,
groups: 3,
jump: function (obj, first) {
//obj包含了当前分页的所有参数，比如：
//console.log("obj.count",obj.count);
//console.log("obj.curr",obj.curr);//得到当前页，以便向服务端请求对应页的数据。
//console.log("obj.limit",obj.limit);//得到每页显示的条数
if (obj.curr != pagingComing.currentPage) {
pagingComing.currentPage = obj.curr;
//首次不执行
if (!first) {
listTabCourses(4, $("#comingTab"));
}
}
}
});
});
}
} else if (data.index == 2) {
if (loadRecommend == 0) {
//已load
loadRecommend = 1;
//list数据
listTabCourses(2, $("#recommendTab"));
//初始化即将上架的分页
layui.use('laypage', function () {
recommendpage = layui.laypage;
//执行一个laypage实例
recommendpage.render({
elem: 'recommendTabPagging', //注意，这里的 test1 是 ID，不用加 # 号
count: pagingRecommend.total, //数据总数，从服务端得到
limit: pagingRecommend.pageSize,
groups: 3,
jump: function (obj, first) {
if (obj.curr != pagingRecommend.currentPage) {
pagingRecommend.currentPage = obj.curr;
//首次不执行
if (!first) {
listTabCourses(2, $("#recommendTab"));
}
}
}
});
});
}
} else if (data.index == 3) {
if (loadHot == 0) {
//已load
loadHot = 1;
//list数据
listTabCourses(1, $("#hotTab"));
//初始化即将上架的分页
layui.use('laypage', function () {
hotpage = layui.laypage;
//执行一个laypage实例
hotpage.render({
elem: 'hotTabPagging', //注意，这里的 test1 是 ID，不用加 # 号
count: pagingHot.total, //数据总数，从服务端得到
limit: pagingHot.pageSize,
groups: 3,
jump: function (obj, first) {
if (obj.curr != pagingHot.currentPage) {
pagingHot.currentPage = obj.curr;
//首次不执行
if (!first) {
listTabCourses(1, $("#hotTab"));
}
}
}
});
});
}
}
});
});
$(function () {
//初始化页面数据
allCourses();
listTabCourses(3, $("#vpiNewTab"));
})
function listTabCourses(cSortType, target) {
var pagedata = "";
if (cSortType == 1) {
pagedata = JSON.stringify(pagingHot);
} else if (cSortType == 2) {
pagedata = JSON.stringify(pagingRecommend);
} else if (cSortType == 3) {
pagedata = JSON.stringify(pagingl);
} else if (cSortType == 4) {
pagedata = JSON.stringify(pagingComing);
}
$.ajax({
url: origin + "***",
type: 'post',
dataType: 'json',
async: false,
data: {
"paging": pagedata,
"cSortType": cSortType
},
success: function (data) {
createCard(data.res, $(target), 1, cSortType);
if (cSortType == 4) {
pagingComing.total = data.tempObj.total;
if (data.tempObj.ids) {
comingCIds = data.tempObj.ids.split(",");
}
} else if (cSortType == 3) {//会员最新上架
pagingl.total = data.tempObj.total;
if (data.tempObj.ids) {
vipNewCIds = data.tempObj.ids.split(",");
}
} else if (cSortType == 2) {//会员最新上架
pagingRecommend.total = data.tempObj.total;
if (data.tempObj.ids) {
recommendCIds = data.tempObj.ids.split(",");
}
} else if (cSortType == 1) {//会员最新上架
pagingHot.total = data.tempObj.total;
if (data.tempObj.ids) {
hotCIds = data.tempObj.ids.split(",");
}
}
}
});
}
//初始化会员最新上架的分页
var viplaypage = null;
layui.use('laypage', function () {
viplaypage = layui.laypage;
//执行一个laypage实例
viplaypage.render({
elem: 'vpiNewTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingl.total //数据总数，从服务端得到
,
limit: pagingl.pageSize,
groups: 3,
jump: function (obj, first) {
//首次不执行
if (!first) {
pagingl.currentPage = obj.curr;
listTabCourses(3, $("#vpiNewTab"));
}
}
});
});
function allCourses(searchClick) {
if (searchClick == 1) {
paging.currentPage = 1; //点击搜索之后分页重置为第一页
}
$.ajax({
url: origin + "***",
type: 'post',
async: false,
dataType: 'json',
data: {
"paging": JSON.stringify(paging),
"title": $("#coursename").val()
},
success: function (data) {
//渲染页面
createCard(data.res, $("#items", 0));
paging.total = data.tempObj;
if (searchClick == 1) {
//初始化分页
layui.use('laypage', function () {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'allCoursePagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: paging.total //数据总数，从服务端得到
,
limit: paging.pageSize,
groups: 3,
jump: function (obj, first) {
//首次不执行
if (!first) {
paging.currentPage = obj.curr;
allCourses();
}
}
});
});
}
},
error: function (res) {
console.log("获取初始数据失败！！");
}
});
}
function addToCourseSort(ids, type, sortType) {
$.ajax({
url: origin + "***",
type: 'post',
dataType: 'json',
data: {
'ids': ids,
'course_type': type,
'sortType': sortType
},
success: function (data) {
if (type == 1) {
if (data.tempObj) {
hotCIds = data.tempObj.split(",");
}
if (data.status == 0) {
pagingHot.total += 1;
}
//拖到过来后，分页中的total也要+1
hotpage.render({
elem: 'hotTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingHot.total //数据总数，从服务端得到
,
limit: pagingHot.pageSize,
groups: 3,
curr: pagingHot.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingHot.currentPage) {
pagingHot.currentPage = obj.curr;
listTabCourses(1, $("#vpiNewTab"));
}
}
});
} else if (type == 2) {
if (data.tempObj) {
recommendCIds = data.tempObj.split(",");
}
if (data.status == 0) {
pagingRecommend.total += 1;
}
//拖到过来后，分页中的total也要+1
recommendpage.render({
elem: 'recommendTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingRecommend.total //数据总数，从服务端得到
,
limit: pagingRecommend.pageSize,
groups: 3,
curr: pagingRecommend.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingRecommend.currentPage) {
pagingRecommend.currentPage = obj.curr;
listTabCourses(2, $("#recommendTab"));
}
}
});
} else if (type == 3) {
if (data.tempObj) {
vipNewCIds = data.tempObj.split(",");
}
if (data.status == 0) {
pagingl.total += 1;
}
//拖到过来后，分页中的total也要+1
viplaypage.render({
elem: 'vpiNewTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingl.total //数据总数，从服务端得到
,
limit: pagingl.pageSize,
groups: 3,
curr: pagingl.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingl.currentPage) {
pagingl.currentPage = obj.curr;
listTabCourses(3, $("#vpiNewTab"));
}
}
});
} else if (type == 4) {
if (data.tempObj) {
comingCIds = data.tempObj.split(",");
}
if (data.status == 0) {
pagingComing.total += 1;
}
//拖到过来后，分页中的total也要+1
viplaypage.render({
elem: 'comingTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingComing.total //数据总数，从服务端得到
,
limit: pagingComing.pageSize,
groups: 3,
curr: pagingComing.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingComing.currentPage) {
pagingComing.currentPage = obj.curr;
listTabCourses(4, $("#comingTab"));
}
}
});
}
}
})
}
//初始化分页
layui.use('laypage', function () {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'allCoursePagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: paging.total //数据总数，从服务端得到
,
limit: paging.pageSize,
groups: 3,
jump: function (obj, first) {
//首次不执行
if (!first) {
paging.currentPage = obj.curr;
allCourses();
}
}
});
});
//全部课程
var sortable = Sortable.create(document.getElementById('items'), {
group: {
name: 'advanced',
pull: 'clone',//pull用来定义从这个列表容器移动出去的设置，可设置值：true/false/'clone'/function
put: false //put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function 这里用false表示列表容器不可以从其他列表容器内放入列表单元；
},
sort: false,//设置排序不可用
onEnd: function (evt, obj) {//列表单元拖放结束后的回调函数
$(evt.item).css("border", ""); //删除表示重复的样式
},
});
var hotSortable = Sortable.create(document.getElementById('hotTab'), {
group: {
name: 'advanced',
pull: true,
put: function (evt, from, item) {
//去重
return norepeat(evt, item, 1);
},
},
onAdd: function (evt) { //拖拽完成
addItem(evt.newIndex, evt.item, evt.to, 1);
//然后请求后台ajax 这样就完成了拖拽排序
},
onUpdate: function (evt) {
sortCourses(evt, 1);
},
});
var recommendSortable = Sortable.create(document.getElementById('recommendTab'), {
group: {
name: 'advanced',
pull: true,
put: function (evt, from, item) {
//去重
return norepeat(evt, item, 2);
},
},
onAdd: function (evt) { //拖拽完成
addItem(evt.newIndex, evt.item, evt.to, 2);
//然后请求后台ajax 这样就完成了拖拽排序
},
onUpdate: function (evt) {
sortCourses(evt, 2);
},
});
var comingSortable = Sortable.create(document.getElementById('comingTab'), {
group: {
name: 'advanced',
pull: true,
put: function (evt, from, item) {
//去重
return norepeat(evt, item, 4);
},
},
onAdd: function (evt) { //拖拽完成
addItem(evt.newIndex, evt.item, evt.to, 4);
//然后请求后台ajax 这样就完成了拖拽排序
},
onUpdate: function (evt) {
sortCourses(evt, 4);
},
});
//会员最新上架sortable
var vipSortable = Sortable.create(document.getElementById('vpiNewTab'), {
group: {
name: 'advanced',
pull: true,
put: function (evt, from, item) {//当有新组件拖过来该容器，调用该函数
//去重
return norepeat(evt, item, 3);
},
},
onAdd: function (evt) { //拖拽完成调用该函数
//添加组件到会员最新上架Tab
addItem(evt.newIndex, evt.item, evt.to, 3);
},
onUpdate: function (evt) {// 列表单元在列表容器中的排序发生变化后的回调函数
//容器内只有一个组件的时候拖拉不会触发该函数
//拖拽更新排序位置
sortCourses(evt, 3);
},
});
function sortCourses(evt, cSortType) {
//新的排序根据前面那个card的id来定位，没有前面的card的时候就根据后面的id来定位
var sorttype = -1;
var ids = "";
if (evt.newIndex > 0) { //不是第一个，就根据前面的ID来定位
ids = $($(evt.to).children()[evt.newIndex - 1]).attr("id") + "," + $(evt.item).attr("id");
sorttype = 0;
} else { //是第一个，就根据后面那个ID定位
ids = $(evt.item).attr("id") + "," + $($(evt.to).children()[evt.newIndex + 1]).attr("id");
sorttype = 1;
}
$.ajax({
url: origin + "/***",
dataType: 'json',
data: {
'sortType': sorttype,
'cSortType': cSortType,
'ids': ids
},
success: function (data) {
for (var i = 0, len = $(evt.to).children().length; i < len; i++) {
$($(evt.to).children()[i].firstChild).text(i + 1);
}
}
});
}
function norepeat(evt, item, type) {
if (type == 3) {
for (var i = 0, len = vipNewCIds.length; i < len; i++) {
if ($(item).attr("id") == vipNewCIds[i]) {
$(item).css("border", "1px solid red");
//layer.msg('该课程已经存在，请勿重复添加');
return false;
}
}
} else if (type == 4) {
for (var i = 0, len = comingCIds.length; i < len; i++) {
if ($(item).attr("id") == comingCIds[i]) {
$(item).css("border", "1px solid red");
//layer.msg('该课程已经存在，请勿重复添加');
return false;
}
}
} else if (type == 2) {
for (var i = 0, len = recommendCIds.length; i < len; i++) {
if ($(item).attr("id") == recommendCIds[i]) {
$(item).css("border", "1px solid red");
//layer.msg('该课程已经存在，请勿重复添加');
return false;
}
}
} else if (type == 1) {
for (var i = 0, len = hotCIds.length; i < len; i++) {
if ($(item).attr("id") == hotCIds[i]) {
$(item).css("border", "1px solid red");
//layer.msg('该课程已经存在，请勿重复添加');
return false;
}
}
}
return true;
}
function addItem(index, item, to, type) {
var head = $('<span class="layui-badge layui-bg-orange sort" style="position:absolute;left:0;">' +
(index + 1) +
'</span><i class="layui-icon" onclick="delCard('' +
$(item).attr("id") +
'',' + type +
')" style="position:absolute;right:0;color:#fff;background-color:#D9001B;cursor:pointer;"></i>')
$(item).prepend(head); //
//动态排序
for (var i = 0, len = $(to).children().length; i < len; i++) {
$($(to).children()[i].firstChild).text(i + 1);
}
//拼装ids，传两个id，第一个id用于定位，第二个才是要插入的id
//前面有ID就用前面的，没有就用后面的ID
var ids = '';
var sortType = -1;
if (index == 0) {
if ($(to).children()[index + 1]) {
sortType = 1;
ids = $(item).attr("id") + "," + $($(to).children()[index + 1]).attr("id");
} else {
ids = $(item).attr("id");
}
} else {
sortType = 0;
ids = $($(to).children()[index - 1]).attr("id") + "," + $(item).attr("id");
}
//请求后台ajax 完成拖拽排序
addToCourseSort(ids, type, sortType);
}
function delCard(id, type) {
layer.confirm('从该列表中删除该课程？', {
icon: 3,
title: '提示'
},
function (index) {
$.ajax({
url: origin + "***",
dataType: 'json',
data: {
"course_type": type,
"course_id": id
},
success: function (data) {
if (type == 1) {
hotCIds = data.tempObj;
$("#hotTab #" + id).remove();
for (var i = 0, len = $("#hotTab").children().length; i < len; i++) {
$($("#hotTab").children()[i].firstChild).text(i + 1);
}
if (data.status == 0) {
pagingHot.total -= 1;
}
hotpage.render({
elem: 'hotTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingHot.total //数据总数，从服务端得到
,
limit: pagingHot.pageSize,
groups: 3,
curr: pagingHot.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingHot.currentPage) {
pagingHot.currentPage = obj.curr;
listTabCourses(1, $("#recommendTab"));
}
}
});
} else if (type == 2) {
recommendCIds = data.tempObj;
$("#recommendTab #" + id).remove();
for (var i = 0, len = $("#recommendTab").children().length; i < len; i++) {
$($("#recommendTab").children()[i].firstChild).text(i + 1);
}
if (data.status == 0) {
pagingRecommend.total -= 1;
}
recommendpage.render({
elem: 'recommendTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingRecommend.total //数据总数，从服务端得到
,
limit: pagingRecommend.pageSize,
groups: 3,
curr: pagingRecommend.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingRecommend.currentPage) {
pagingRecommend.currentPage = obj.curr;
listTabCourses(2, $("#recommendTab"));
}
}
});
} else if (type == 3) {
vipNewCIds = data.tempObj;
$("#vpiNewTab #" + id).remove();
for (var i = 0, len = $("#vpiNewTab").children().length; i < len; i++) {
$($("#vpiNewTab").children()[i].firstChild).text(i + 1);
}
if (data.status == 0) {
pagingl.total -= 1;
}
viplaypage.render({
elem: 'vpiNewTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingl.total //数据总数，从服务端得到
,
limit: pagingl.pageSize,
groups: 3,
curr: pagingl.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingl.currentPage) {
pagingl.currentPage = obj.curr;
listTabCourses(3, $("#vpiNewTab"));
}
}
});
} else if (type == 4) {
comingCIds = data.tempObj;
$("#comingTab #" + id).remove();
for (var i = 0, len = $("#comingTab").children().length; i < len; i++) {
$($("#comingTab").children()[i].firstChild).text(i + 1);
}
if (data.status == 0) {
pagingComing.total -= 1;
}
comingpage.render({
elem: 'comingTabPagging' //注意，这里的 test1 是 ID，不用加 # 号
,
count: pagingComing.total //数据总数，从服务端得到
,
limit: pagingComing.pageSize,
groups: 3,
curr: pagingComing.currentPage,
jump: function (obj, first) {
if (obj.curr != pagingComing.currentPage) {
pagingComing.currentPage = obj.curr;
listTabCourses(4, $("#comingTab"));
}
}
});
}
layer.close(index);
}
});
});
}
//渲染页面
//left: 1-渲染左边的tab，0-渲染右边
//type:排序板块：1-热门课程 2-最新课程 3-会员免费课程 4-即将上架课程
function createCard(data, oContainer, left, type) {
var html = "";
for (var i = 0; i < data.length; i++) {
html += '<div id="' + data[i].id +
'" name="courseName" class="imgcard" style="margin-left: 30px; margin-top: 30px;">'
if (left == 1) {
html += '<span class="layui-badge layui-bg-orange sort" style="position:absolute;left:0;">' +
(i + 1) +
'</span><i class="layui-icon" onclick="delCard('' + data[i].id + '',' + type +
')" style="position:absolute;right:0;color:#fff;background-color:#D9001B;cursor:pointer;"></i>';
}
html += '<img src="' + data[i].cover_m + '" class="card-img" />' +
'<div><p class="card-word">' + data[i].title + '</p></div>';
//状态判断
if (0 == data[i].status) {
html += '<div style="width:50px;height:16px;background-color:#D9001B;color:#fff;font-size: 12px;">待上架</div>';
} else if (1 == data[i].status) {
html += '<div style="width:50px;height:16px;background-color:#70B603;color:#fff;font-size: 12px;">上架</div>';
} else if (2 == data[i].status) {
html += '<div style="width:50px;height:16px;background-color:#AAAAAA;color:#fff;font-size: 12px;">已下架</div>';
} else if (3 == data[i].status) {
html += '<div style="width:50px;height:16px;background-color:#AAAAAA;color:#fff;font-size: 12px;">暂停销售</div>';
} else if (5 == data[i].status) {
html += '<div style="width:50px;height:16px;background-color:#F59A23;color:#fff;font-size: 12px;">即将上架</div>';
}
html +=
'<div style="text-align: left; padding-left: 3px; padding-right: 3px; position: absolute; bottom: 0; width: 100%;">';
if (!data[i].vip_price) {
html += '<span class="course-price-status">' + data[i].price + '</span> ';
} else if (data[i].vip_price == 0) {
html += '<span class="course-price-status">免费</span> ';
} else {
html += '<span class="course-price-status">' + data[i].vip_price + '</span> ';
}
html += '<span class="course-bottom" style="text-decoration: line-through;">￥' + data[i].show_price + '</span>';
html += '<span class="course-bottom" style="right: 13px; position: absolute; bottom: 0;">' + data[i].study_num +
'人在学</span></div></div>';
}
oContainer.html(html);
}
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
