点击切换对应ajax数据赋值取值传给全局变量到生成新的模板数据（获取有class active样式的选中值！！！）

最新推荐文章于 2023-04-03 17:38:31 发布

Khun_HWJ

最新推荐文章于 2023-04-03 17:38:31 发布

阅读量281

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/Khun_HWJ/article/details/104933297

版权

jquery 专栏收录该内容

160 篇文章 4 订阅

订阅专栏

知识点：
1、将内容赋值给全局变量作为新的data数据传到模板里
2、获取有active样式的选中值
$('.v8-classlist.active').attr('data-memid');
3、监听layui tab选项卡的切换
element.on('tab(classtabboxtab)', function(data){ });
4、切换时将tab选项卡回到第一个
element.tabChange('classtabboxtab', '11');
<li class="layui-this" lay-id="11">微课</li>
在这里插入图片描述

需求：点击切换班级对应相关信息

1、获取班级列表信息

$.post('/shared/profile/getmyclasslist',function (res) {});
在这里插入图片描述
之前用模板循环了数据结果是所有的班级都出来了，但是需求是只显示一个，所以将模板的循环个去掉，数据为默认值d，d.classlogo、d.classname等等。
数据的来源就是/shared/profile/getmyclasslist接口中的数据，写到相应的data-memid、data-classname等等中，然后取值，赋值给全局变量classdata。renderClassinfo('[data-role="classinfo"]',classdata);//班级信息中的classdata就是全局变量classdata。

班级信息模板html

<script id="classinfo" type="text/html">
	<div class="info">
	{{#  if(d.classlogo == ''){ }}
		<img src="/static/shared/images/avatar_class.png"/>
	{{#  }else{ }} 
		<img src="{{ d.classlogo }}" />
	{{#  } }}
	</div>
	<div class="info">
		<div class="classname">{{d.classname}}</div>
		<div>班级号：{{d.classid}}</div>
		<div>成员：{{d.memnum}}</div>
	</div>
</script>

其中，获取有active中的data-memid、data-classname等值，然后赋值给全局变量classdata

var _memid = $('.v8-classlist.active').attr('data-memid');
var _clsid = $('.v8-classlist.active').attr('data-clsid');
var _classlogo = $('.v8-classlist.active').attr('data-classlogo');
var _classname = $('.v8-classlist.active').attr('data-classname');
var _classid = $('.v8-classlist.active').attr('data-classid');
var _memnum = $('.v8-classlist.active').attr('data-memnum');
classdata.memid = _memid;
classdata.clsid = _clsid;
classdata.classlogo = _classlogo;
classdata.classname = _classname;
classdata.classid = _classid;
classdata.memnum = _memnum;

renderClassinfo('[data-role="classinfo"]',classdata);//班级信息

班级列表数据完整版

function getmyclasslist(){
var indexs = layer.load(2,{shade: [0.5,'#fff']});	//加载班级信息
$.post('/shared/profile/getmyclasslist',function (res) {
	if(res.success){
		layer.close(indexs);
		// $("#classinfo").empty();
		var addmyclasslist = res.data.addmyclasslist;
		if(addmyclasslist.length > 0){
			for(var i = 0;i<addmyclasslist.length; i++){
				global_data.videos.p_fid = '';
				global_data.videos.p_title = '';
				global_data.videos.start = 0;
				global_data.videos.folderid = 0;
				global_data.videos.clsid = addmyclasslist[i]['clsid'];
				var classlist = '';
				if(i == 0){
					classlist = '<div class="v8-classlist active" data-memnum="'+addmyclasslist[i]['memnum']+'" data-classid="'+addmyclasslist[i]['classid']+'" data-classname="'+addmyclasslist[i]['classname']+'" data-classlogo="'+addmyclasslist[i]['classlogo']+'" data-memid="'+addmyclasslist[i]['memid']+'" data-clsid="'+addmyclasslist[i]['clsid']+'">'+addmyclasslist[i]['classname']+'</div>';
				}else{
					classlist = '<div class="v8-classlist" data-memnum="'+addmyclasslist[i]['memnum']+'" data-classid="'+addmyclasslist[i]['classid']+'" data-classname="'+addmyclasslist[i]['classname']+'" data-classlogo="'+addmyclasslist[i]['classlogo']+'" data-memid="'+addmyclasslist[i]['memid']+'" data-clsid="'+addmyclasslist[i]['clsid']+'">'+addmyclasslist[i]['classname']+'</div>';
				}
				$('.v8-classlistbox').append(classlist);
			}
			
			//取出当前数据传给classinfo模板
			var _memid = $('.v8-classlist.active').attr('data-memid');
			var _clsid = $('.v8-classlist.active').attr('data-clsid');
			var _classlogo = $('.v8-classlist.active').attr('data-classlogo');
			var _classname = $('.v8-classlist.active').attr('data-classname');
			var _classid = $('.v8-classlist.active').attr('data-classid');
			var _memnum = $('.v8-classlist.active').attr('data-memnum');
			classdata.memid = _memid;
			classdata.clsid = _clsid;
			classdata.classlogo = _classlogo;
			classdata.classname = _classname;
			classdata.classid = _classid;
			classdata.memnum = _memnum;
			
			
		renderClassinfo('[data-role="classinfo"]',classdata);//班级信息
		renderClasstab('[data-role="classtabbox"]',addmyclasslist);//班级tab盒子
		$('[data-quitbtn="quitclass"]').attr('data-memid',classdata.memid);//班级memid
		getclassvideolist(0,classdata.clsid,0,'','','','');//班级微课列表
		
	}else{
		$('[data-role="content"]').append('还没有加入过班级');
		layer.close(indexs);
	}
	}
});
}
getmyclasslist();

班级信息模板

//班级信息模板
function renderClassinfo(selector, data) {
	var htmls = $("#classinfo").html();
	laytpl(htmls).render(data, function(html) {
		$(selector).html(html);
	});
};

2、点击班级列表切换

在这里插入图片描述

点击切换班级时要切换renderClassinfo()的模板信息，获取tab的getclassvideolist()方法相关内容，并且回到微课第一个页签，将memid赋值给退出班级按钮。

//切换班级
$(document).on('click','.v8-classlist',function(){
	$(this).addClass('active').siblings().removeClass('active');
	classdata.memid = $(this).attr('data-memid');
	classdata.clsid = $(this).attr('data-clsid');
	classdata.classlogo = $(this).attr('data-classlogo');
	classdata.classname = $(this).attr('data-classname');
	classdata.classid = $(this).attr('data-classid');
	classdata.memnum = $(this).attr('data-memnum');
	
	renderClassinfo('[data-role="classinfo"]',classdata);//班级信息
	getclassvideolist(0,classdata.clsid,0,'','','','');//班级微课列表
	element.tabChange('classtabboxtab', '11'); //切换到：微课
	$('[data-quitbtn="quitclass"]').attr('data-memid',classdata.memid);//班级memid
});

3、退出班级

//退出班级
$(document).on('click','[data-quitbtn="quitclass"]',function(){
   var memid = $(this).attr('data-memid');
   layer.confirm('是否确定退出该班级?',{
       btn: ['确定','取消'],
   },function(){
       $.post('/shared/profile/memdelete/' + memid, '',function(result){
           if(result.success){
               document.location = "/shared/profile/classinfostudent";
           }else{
               layer.alert("操作发生错误。" + result.message);
           }
       });
   });
});

4、tab里的成员列表

/shared/profile/getclassdetail接口数据

//成员
function getclassdetail(clsid,callback){
	$.post('/shared/profile/getclassdetail',{'clsid':clsid},function(res){
		if(res.success){
			var studentlist = res.data.studentlist;
			var teacherlist = res.data.teacherlist;
			var grouplist = res.data.grouplist;
			//学生
			if(studentlist.length > 0){
				for(var i = 0;i<studentlist.length;i++){
					memberlist($('.member-student'),studentlist[i]['userheade'],studentlist[i]['username']);
				}
			}else{
				$('.member-student').html('<div class="nofind">暂无学生</div>');
			}
			
			//老师
			if(teacherlist.length > 0){
				for(var j = 0;j<teacherlist.length;j++){
					memberlist($('.member-teacher'),teacherlist[j]['userheade'],teacherlist[j]['username']);
				}
			}else{
				$('.member-teacher').html('<div class="nofind">暂无老师</div>');
			}
			
			//小组
			if(grouplist.length > 0){
				for(var m = 0;m<grouplist.length;m++){
					memberlist($('.member-team'),grouplist[m]['logo'],grouplist[m]['groupname']);
				}
			}else{
				$('.member-team').html('<div class="nofind">暂无小组</div>');
			}
		}else{
			layer.msg(res.messsage);
		}
	});
}

监听tab的切换

//切换tab
element.on('tab(classtabboxtab)', function(data){
	$('.member-student').empty();
	$('.member-teacher').empty();
	$('.member-team').empty();
	getclassdetail(classdata.clsid,function(){});//班级成员
});

成员html的模板

//成员
function memberlist(selector,img,name){
	var memberlist = '<div class="v8-memberlist"><img src="'+img+'"/><p>'+name+'</p></div>';
	$(selector).append(memberlist);
}

5、微课列表

//获得班级微课列表
function getclassvideolist(start,clsid,folderid,keyword,p_fid,f_title){
	var indexs = layer.load(2,{shade: [0.5,'#fff']});	//加载班级信息
	if(parseInt(clsid) == 0){
		layer.msg('缺少班级信息');
		return false;
	}
	$('#classvideos').empty();
	global_data.videos.clsid = clsid;
	var postdata={
		'clsid':clsid,
		'start':start,
		'folderid':folderid,
		'keyword':keyword,
	}
	$.post('/shared/profile/classvideolist',postdata,function(res){
		if(res.success){
			layer.close(indexs);
			res.data.p_fid = 0;
			res.data.f_title = '';
			if(f_title){
				global_data.videos.p_fid =p_fid;
				global_data.videos.f_title = f_title;
				res.data.p_fid=p_fid;
				res.data.f_title=f_title;
			}
			var classvideolistTpl = classvideolist.innerHTML;
			laytpl(classvideolistTpl).render(res.data, function(html){
				classvideos.innerHTML = html;
			});
			laypage({
				cont: $('#videos_page'),
				first: false,
				last: false,
				limit: 10,
				pages: Math.ceil(res.itemcount/ 10),
				curr: start/10 + 1,
				groups: 5,
				jump:function(obj, first){
					if(!first){
						console.log(obj);
						getclassvideolist((obj.curr-1) * 10,clsid,folderid,keyword,p_fid,f_title);
					}
				}
			});
		}else{
			layer.msg(res.message);
			return false;
		}
	})
}

6、微课搜索

有内容时删除按钮出来，enter可以触发键盘事件，并且清空输入内容

//搜索微课
$(document).on('keyup','[data-role="searchvideo"]',function(event){
	if (event.keyCode == 13) {
		searchval();
	}
});

$(document).on('click','[data-role="delvideobtn"]',function(){
	$('[data-role="searchvideo"]').val('');
	getclassvideolist(0,global_data.videos.clsid,0,'','','','');//班级微课列表
	$('[data-role="delvideobtn"]').hide();
});

$(document).on('click','[data-role="searchvideobtn"]',function(){
	searchval();
});

function searchval(){
	var searchval = $('[data-role="searchvideo"]').val();
	if(searchval){
		$('[data-role="delvideobtn"]').show();
		getclassvideolist(0,global_data.videos.clsid,0,searchval,'','','');//班级微课列表
	}else{
		$('[data-role="delvideobtn"]').hide();
		layer.msg('请输入关键字搜索微课');
	}
}

//班级tab盒子模板
function renderClasstab(selector, data) {
	var htmls = $("#classtabboxtab").html();
	laytpl(htmls).render(data, function(html) {
		$(selector).html(html);
	});
};

//替换掉所有的换行符 空格
function TransferString(content){
	var string = content;
	try{
		string=string.replace(/[\r\n]/g,"").trim();
	}catch(e) {
		alert(e.message);
	}
	return string;
}

Khun_HWJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击切换对应ajax数据赋值取值传给全局变量到生成新的模板数据（获取有class active样式的选中值！！！）

知识点：1、将内容赋值给全局变量作为新的data数据传到模板里2、获取有active样式的选中值需求：点击切换班级对应相关信息1、获取班级列表信息$.post('/shared/profile/getmyclasslist',function (res) {});之前用模板循环了数据结果是所有的班级都出来了，但是需求是只显示一个，所以将模板的循环个去掉，数据为默认值d，d.clas...
复制链接

扫一扫