BBQ 回退使用实例

//"技术方向"值,默认全部
var tecAspectValue = "all";
var roleType;
var trainingType;
var jsonCondition ={} ;
var itemsPerPage = 10; // 每页显示10条数据
$(function() {
	roleType = $("#roleType").val();
	var curjsonCondition = getJsonCondition();
	curjsonCondition["roleType"] = roleType;
	curjsonCondition["sign"] = "cp";
	searchResponseFun(curjsonCondition);
	//页面UI初始化
	initUI();
	// 添加页面监听
	initListener();
	$(window).hashchange(function(){
		searchResponseFun($.bbq.getState());
	});
});
/**
 * 界面布局及样式调整
 * 完成导航树和面包屑以及列表页面的渲染
 */
function initUI() {
	initHeadAndLeftTree();
	$("#resList").empty('');
}
//初始化页面的头部面包屑和左边的导航树。
function initHeadAndLeftTree(){
	var curPathHtml = "<span><a href='Index!toTrainIndex'>"+$("#trainCer").val()+"</a></span><span> > </span> ";
	curPathHtml += "<span><a href='NavigationAction!createNavi?null#navi%5Bid%5D=TRAIN&navi%5Bt%5D=1350375581231' id ='headNavi'>"+$("#navitrain").val()+"</a></span>";
	//从页面的隐藏域<input type="hidden" value="${roleType}" id="roleType">
	var roleByVistor = $("#roleType").val();
	var roleValue;
	switch(roleByVistor){
	case "student":
		roleValue = $("#student").val();
		break;
	case "isv":
		roleValue = $("#isv").val();
		break;
	case "ECustomer":
		roleValue = $("#ecustomer").val();
		break;
	case "CPartner":
		roleValue = $("#cpartner").val();
		break;
	default:
		roleValue = $("#cpartner").val();
		break;
	}
	curPathHtml += " <span id='angleSign'> > </span><span class='spanPreClass' id='curmbLevel1'>"+roleValue+"</span>";
	//完成面包屑的初始化
	$("#nav_route").append(curPathHtml);
	
	//初始化左边导航树		
	var leftNaviStr;
	//当访问者类型为"渠道伙伴"时，构建页面左边导航树,添加"售前"/"售后"子导航。
	if(roleByVistor == "CPartner"){
		leftNaviStr = "<span class='node_01_img_unselected'></span>" + roleValue;
		$("#TRAIN").html(leftNaviStr);
		var subNaviStr = "<ul class='child_ul'>";
		subNaviStr += "<li class='li_child_sale'><span class='level2_a_img'></span><a href='javascript:void(0);' id='preSale' value='PreSale'>"+$("#salePre").val()+"</a></li>";
		subNaviStr += "<li class='li_child_sale'><span class='level2_a_img'></span><a href='javascript:void(0);' id='aftSale' value='AftSale'>"+$("#saleAft").val()+"</a></li>";  
		subNaviStr += "</ul>";
		$("#rootLi").append(subNaviStr);
	}
	//如果访问者类型为非"渠道伙伴"时，导航树的初始化。
	else{
		leftNaviStr = "<span class='node_03_img_unselected'></span>" + roleValue;
		$("#TRAIN").html(leftNaviStr);
	}
}
//给"培训类型"链接 和"技术方向"下拉列表添加监听事件。
function initListener(){
	
	 //监听用户点击"培训类型"链接事件
	 $("a[name='resourceType']").live("click", function() {
		  $("a[name='resourceType']").removeClass("selected");
		  $(this).addClass("selected");
		 //收集条件,便于bbq使用
		 var curjsonCondition = getJsonCondition();
		 curjsonCondition["roleType"] = getSelectedRoleTypeVal();
		 curjsonCondition["trainingType"] =  $(this).attr("value");
		 curjsonCondition["tecAspectValue"] = getSelectedTecVal();
		 $.bbq.pushState(curjsonCondition, 2);
		 return false;
	  });
	 //监听用户点击"技术方向"链接事件
	 $("a[name='tecAspectType']").live("click", function() {
		$("a[name='tecAspectType']").removeClass("selected");
		$(this).addClass("selected");
		var curjsonCondition = getJsonCondition();
		curjsonCondition["roleType"] = getSelectedRoleTypeVal();
		curjsonCondition["trainingType"] =  getSelectedTraingingType();
		curjsonCondition["tecAspectValue"] = $(this).attr("id");
		$.bbq.pushState(curjsonCondition, 2);
		return false;
	  });
	//左边导航树点击事件
	$("#TRAIN").click(function(){
		var curjsonCondition = getJsonCondition();
		curjsonCondition["roleType"] = $(this).attr("value");
		curjsonCondition["trainingType"] =  getSelectedTraingingType();
		curjsonCondition["tecAspectValue"] = getSelectedTecVal();
		$.bbq.pushState(curjsonCondition, 2);
		if($(this).attr("value") == "CPartner"){
			$("#angleSign").nextAll().remove();
			var childHeadNavi = "<span class='spanPreClass'>"+ $("#cpartner").val()+"</span>";
			$("#nav_route").append(childHeadNavi);	
		}
		searchResponseFun(curjsonCondition);
		return false;
	});
	//点击页面左侧的导航"售前/售后"
	$("li.li_child_sale a").click(function(){
		var subType = $(this).attr("value");
		var curjsonCondition = getJsonCondition();
		curjsonCondition["roleType"] = subType;
		curjsonCondition["trainingType"] =  getSelectedTraingingType();
		curjsonCondition["tecAspectValue"] = getSelectedTecVal();
		$.bbq.pushState(curjsonCondition, 2);
		searchResponseFun(curjsonCondition);
	});
	
	//当面包屑中带有"售前"/"售后"时，"渠道伙伴"的绑定事件。
	$("#crumbCP").live("click",function(){
		//移除"售前/售后"添加样式
		$(".li_child_sale").find("a").each(function(key,value){	 
			  $(this).removeClass("clickedNaviClass");
		 });
		//重构面包屑
		$("#angleSign").nextAll().remove();
		var newCrumb = "<span class='spanPreClass' id='curmbLevel1'>"+$("#cpartner").val()+"</span>";
		$("#nav_route").append(newCrumb);
		$("#TRAIN").addClass("clickedNaviClass");
		$("#spte_train_boxface").empty();
		$("#spte_train_boxface").addClass("spte_train_boxface");
		//重新添加页面元素。
		var addHtmlStr = "<div id='resList'></div><div class='pagination' style='margin-top:5px; padding-bottom:15px' id='pagingSign'></div>"
		$("#spte_train_boxface").html(addHtmlStr);
		$("#roleParamId").css('display','block');
		var curjsonCondition = getJsonCondition();
		curjsonCondition["roleType"] = "CPartner";
		curjsonCondition["trainingType"] =  getSelectedTraingingType();
		curjsonCondition["tecAspectValue"] = getSelectedTecVal();
		$.bbq.pushState(curjsonCondition, 2);
	});
}
//点击培训列表页面中某条记录标题转向到其详细页面。传入的参数时modelId 和 courseId
function loadTrainingCourseDetail(type,id){
	var curjsonCondition = getJsonCondition();
	curjsonCondition["roleType"] = getSelectedRoleTypeVal();
	curjsonCondition["trainingType"] =  getSelectedTraingingType();
	curjsonCondition["tecAspectValue"] = getSelectedTecVal();
	curjsonCondition["courseId"] = id;
	curjsonCondition["currentMID"] = type;
	$.bbq.pushState(curjsonCondition, 2);	
}
//获取用户当前选择的访问者类型
function getSelectedRoleTypeVal(){
	if($("#TRAIN").attr("value") == "CPartner"){
		roleType = "CPartner";
		if($("#preSale").hasClass("clickedNaviClass")){
			roleType = "PreSale";
		}
		if($("#aftSale").hasClass("clickedNaviClass")){
			roleType = "AftSale";
		}
	}else{
		roleType = $("#TRAIN").attr("value");
	}
	return roleType;
}
//获取用户当前选择的技术方向
function getSelectedTecVal(){
	var  tecVal = "all";
	$("a[name='tecAspectType']").each(function(){
		if($(this).hasClass("selected")){
			tecVal = $(this).attr("id"); 
		}
	});
	return tecVal;
}
//获取当前用户当前选择的培训类型
function getSelectedTraingingType(){
	var  trainType;
	$("a[name='resourceType']").each(function(key,value){	 	  
		  if($(this).hasClass("selected")){
			  trainType = $(this).attr("value");
		  }
	 });
	return trainType;
}

/**
 * 查询入口响应函数
 */
function searchResponseFun(queryCondition){
	stepNum = 0;
	searchResultCount=0;
	
	new sui.cbb.blockUI().block(false);
	//从bbq中获取存储的条件信息，格式为json
	var condition = jQuery.extend(true, {}, queryCondition);
	if(typeof condition["tecAspectValue"] == "undefined" || condition["roleType"] == "undefined"){
		condition["roleType"] = $("#roleType").val();
		condition["trainingType"] =  "all";
		condition["tecAspectValue"] = "all";
	}
	//根据用户当访问的URL中存有的参数来判断，用户"回退"/"前进"中访问的是否是详细页面
	if(typeof condition["currentMID"] != "undefined" && typeof condition["courseId"] != "undefined"){
		//回到到详细列表页面时需要将原来的页面内容清空
		$("#roleParamId").css('display','none');		
		$(".spte_train_boxface").empty();
		if(condition["currentMID"] == "M008"){
			$("#spte_train_boxface").removeClass("spte_train_boxface");
			$("#spte_train_boxface").load("trainFaceDetailAction?courseId="+condition["courseId"]);
			$("#right_contain").hide();
		}else{
			$("#spte_train_boxface").removeClass("spte_train_boxface");
			$("#spte_train_boxface").load("nodeQueryAction!loadTrainProjectInfo?courseId="+condition["courseId"]);
			$("#right_contain").hide();  
		}
		new sui.cbb.blockUI().unBlock();
	}else{
		//重新添加页面元素(在点击了一个详细页面，再点击回退到上一页面时，需要判断相关的页面element是否存在)
		var $objDiv = $("#resList");
		if($("#resList").size() == 0){
			$("#spte_train_boxface").addClass("spte_train_boxface");
			$("#spte_train_boxface").empty();
			var addHtmlStr = "<div id='resList'></div><div class='pagination' style='margin-top:5px; padding-bottom:15px' id='pagingSign'></div>"
			$("#spte_train_boxface").html(addHtmlStr);
			$("#roleParamId").css('display','block');
		}
		//在当前查询与上次查询只有页码不一致的情况，看做是翻页操作
		if(jsonEqual(condition,jsonCondition)==true){
			if(typeof condition["beginPage"] != "undefined" 
				&& typeof condition["resCount"] != "undefined" 
					&& condition["beginPage"] != jsonCondition["beginPage"]){
				//获取用户选择的页码
				var cur_page_index = Math.floor((condiction["beginPage"]-1)/itemsPerPage);
				showPaginationItem(condition, 0, 0, function() {
					showPagination(condition, cur_page_index,condition["resCount"]);
					// 保存当前查询条件
					jsonCondition = jQuery.extend(true, {}, condction);
					stepNum = 0;
				});
				return false;
			}
		}
		//展现查询的数据结果
		showPaginationItem(condition,0 , 0 ,function(){
			//展现查询条件框
			updateCondition(condition);
		});
		//查询总个数及翻页个数
		getResTotalCount(condition,function(searchJson,pageIndex,resultCount){
			showPagination(searchJson,pageIndex,resultCount);
		});
		//更新查询条件
		updateCondition(condition);
		$("#right_contain").show();
		updatePageStyle(condition);
	}
}

//初始化展现分页控件。
function showPagination(conditionJson, pageIndex, resRount){
	//引用分页控件国际化
	var initpageFlag = true;
	var self=new sui.cbb.paging();
	//定义初始化分页控件所需参数。
	var opt ={};
	opt.button_text = self.button_text, 	//按钮的文本
	opt.prev_text = self.prev_text,   	//上一页文本
	opt.next_text = self.next_text,		//下一页
	opt.callback = function(page_index, items_page){//回调函数
		if( initpageFlag == false ){
			var curjsonCondition = getJsonCondition();
			curjsonCondition["pageSize"] = itemsPerPage;
			curjsonCondition["beginPage"] = page_index*itemsPerPage+1;
			curjsonCondition["roleType"] = getSelectedRoleTypeVal();
			curjsonCondition["resCount"] = resRount;
			//在后面可能会加上逻辑判断
			curjsonCondition["tecAspectValue"] = getSelectedTecVal();
			curjsonCondition["trainingType"] = getSelectedTraingingType();
			$.bbq.pushState(curjsonCondition, 2);
		}
		initpageFlag = false;
	}, 
	opt.num_display_entries = 5,	//设置中段页码标记个数
	opt.items_per_page = itemsPerPage,	//每页行数
	opt.allRecord = self.allRecord,//总页数
	opt.current_page = parseInt(pageIndex);//设置起始页数
	var pageDivObj=$("#pagingSign");
	pageDivObj.pagination(resRount, opt);
}
/*
 * getResTotalCount获取查询结果数量，主要是用于分页控件的体现
 * @param conditionJson 当前查询条件json格式
 * @param callback 执行ajax查询后的后处理
 */
function getResTotalCount(conditionJson,callback){
	$.ajax({
		type: "post", 			//用POST方式传输 
		url: "queryByVistorRole!getResultTotalRow",
		data : conditionJson,
		dataType : "json",
		time: new Date(),
		async:true, 			//作用是防止在ajax成功调用之前就调用$("#Pagination").pagination,这个时候数据个数还没有初始化
		success : function(data) {
			if("ssoLoginTimeOut"==data.ssoLoginFlag)
			{
				forLogin();
				return false;
			}
			var count = data.totalRow;
			//当查询结果为空时, 给用户提示。
			if(count <1){
				$("#resList").empty();
				$("#pagingComponent").empty();
				var inner = "<ul class='re_container'>";
				inner+="<li class=re_content style='color:red;'>"+$("#noData").val()+"</li>";
				inner+="</ul>";
				$("#exam_outline_records").html(inner);
				//按照前台UI规范，即使查询结果为0,依旧显示分页控件
				showPagination(conditionJson, 0,data.totalRow);			
			}
			
			//判断当前的页码,初始设置0
			var cur_page_index = 0;
			if(typeof conditionJson["beginPage"] != "undefined")
			{
				cur_page_index = (conditionJson["beginPage"]-1)/itemsPerPage;
			}
			//保存查询的结果
			conditionJson["resCount"]= count;
			if(typeof callback == "function"){
				callback(conditionJson,cur_page_index,count);
			}
			//更新查询条件Json中的数据，用于bbq后退事件获取条件。
			updateCondition(conditionJson);
		}
	});
	return false;
}

/**
 * 分页控件的回调函数，用于显示查询的最终页面结果
 * @filterCondition 页面传递到Action的参数,json格式
 * @param page_index  第几页
 * @param items_page 每页显示的记录数
 * @returns
 */
function showPaginationItem(queryCondition,page_index, items_page,callback)
{
	$.ajax({
			cache: false,
			type: "POST",
			url: "queryByVistorRole!getResultList",
			data: queryCondition,
			dataType: 'json',
			success: function(data)
			{
				//刷新数据展现区域数据
				refreshTable(data);
				new sui.cbb.blockUI().unBlock();
			},
			error: function(){
				$("#resList").html($("#queryError").val());
				new sui.cbb.blockUI().unBlock();
			}
		}); 
}
//渲染查询出来的结果列表，
 function refreshTable(arrayData){
	if(!arrayData){
		return false;
	}
	var strTrData = "";
	for(var i=0 ; i<arrayData.length; i++) 
	{
		var modelID = arrayData[i].model.id;
		var courseStyleVal;
		if(modelID == "M008"){
			courseStyleVal = $("#face2faceStyle").val();
		}else{
			courseStyleVal = $("#onLineStyle").val();
		}
		strTrData += "<ul class='enterprise_ul'>";
		strTrData += "<li class='li1' style='padding-top: 3px;'><span class='intro'><a href='javascript:loadTrainingCourseDetail(\""+arrayData[i].model.id+"\",\""+arrayData[i].id+"\");' title='"+encodeHtml(arrayData[i]['name'])+"'><span style='color:#900;'>" + encodeHtml(arrayData[i]['name'])  + "</span></a></span></li>";
		strTrData += "<li class='li3' style='+padding-left:15px;'><span class='intro'>"+$("#courseStyle").val()+": "+""+ courseStyleVal  +"</span></li>";
		strTrData += "<li class='li2'><span class='intro' title='"+encodeHtml(arrayData[i]['abstracts'])+"'>"+ encodeHtml(arrayData[i]['abstracts'])  +"</span></li>";
		strTrData += "</ul>";
	}
	$("#resList").empty();
	$("#resList").append(strTrData);
 } 
 
 //配合前进后退中页面样式的展现(根据condition中"培训类型"/"技术方向"值来修改中间页面的样式展现)
 function updatePageStyle(condition){
	 //如果访问者角色是("渠道伙伴"/或者是其下的"售前"/"售后")或者是"在校学生"/"企业客户"/"ISV" 的话,需要根据条件初始化页面中的面包屑以及页面的导航树
	 //移除原有的"培训类型"上的样式
	 $("a[name='resourceType']").each(function(){
		 $(this).removeClass("selected");
	 });
	 //依据条件重新给"培训类型"添加样式
	 $("a[name='resourceType']").each(function(){
		 if($(this).attr("value") == condition["trainingType"]){
			 $(this).addClass("selected");
		 }
	 });
	 //移除原有的"技术方向"上的样式
	 $("a[name='tecAspectType']").each(function(){
		 $(this).removeClass("selected");
	 });
	//依据条件重新给"技术方向"添加样式
	 $("a[name='tecAspectType']").each(function(){
		 if($(this).attr("id") == condition["tecAspectValue"]){
			 $(this).addClass("selected");
		 }
	 });
	 if(condition["roleType"] == "CPartner" || condition["roleType"] == "PreSale" || condition["roleType"] == "AftSale"){
		 updateCPartnerPageStyle(condition);
	 }
 }
function updateCPartnerPageStyle(condition){
	//移除原有的在左边导航上"渠道伙伴"/"售前"/"售后"上的样式
	$("#TRAIN").removeClass("clickedNaviClass");
	//为当前的点击"售前/售后"添加样式
	$("li.li_child_sale a").each(function(){	 
		$(this).removeClass("clickedNaviClass");
	});
	if(condition["roleType"] == "CPartner"){
		$("#TRAIN").addClass("clickedNaviClass");
		if(typeof condition["sign"] == "undefined"){
			$("#angleSign").nextAll().remove();
			var childHeadNavi = "<span class='spanPreClass'>"+ $("#cpartner").val()+"</span>";
			$("#nav_route").append(childHeadNavi);	
		}
	}else if(condition["roleType"] == "PreSale"){
		$("#preSale").addClass("clickedNaviClass");
		$("#angleSign").nextAll().remove();
		//重构面包屑内容.
		var htmlStr = "<span id = 'cpartCrumb'>";
		htmlStr += "<a herf='javascript:void(0)'  class='spanAftClass' id='crumbCP'>"+$("#cpartner").val()+"</a></span>";
		htmlStr += "<span> > </span><span style='color:#990000'> "+$("#salePre").val()+"</span>";
		$("#nav_route").append(htmlStr);
	}else{
		$("#aftSale").addClass("clickedNaviClass");
		$("#angleSign").nextAll().remove();
		//重构面包屑内容.
		var htmlStr = "<span id = 'cpartCrumb'>";
		htmlStr += "<a herf='javascript:void(0)'  class='spanAftClass' id='crumbCP'>"+$("#cpartner").val()+"</a></span>";
		htmlStr += "<span> > </span><span style='color:#990000'> "+$("#saleAft").val()+"</span>";
		$("#nav_route").append(htmlStr);
	}
}
 
 /*
  * 获取上次历史的查询条件
  * @return 修改后的历史查询条件
  */
 function getJsonCondition()
 {
 	var newJson = jQuery.extend(true, {}, jsonCondition); 
 	//非页数变化的查询都清空搜索结果个数及修改查询页数
 	delete newJson["resCount"];
 	newJson["pageSize"] = itemsPerPage;
 	newJson["beginPage"] = 1;	
 	return newJson;
 }
  /*
  * 将上次历史查询条件更新为当前的json条件，这里要注意保证是在最后才进行对上次查询条件的更新
  * @param 最新的查询参数，json格式
  */
 function updateCondition(curCondictionJson)
 {
 	stepNum = stepNum +1;
 	if (stepNum == 4) {
 		// 保存当前查询条件
 		jsonCondition = jQuery.extend(true, {}, curCondictionJson);
 		stepNum = 0;
 	}
 	return false;
 }
 /*
  * 检查出了页码以外的参数是否一致
  * param curJson 当前的查询条件
  * param oldJson 上次查询的历史条件
  */
 function jsonEqual(curJson,oldJson){
 	//访问者较色条件比较
 	if(curJson["roleType"] != oldJson["roleType"] && 
 			!(typeof curJson["roleType"] == "undefined" && typeof oldJson["roleType"] == "undefined")){
 		return false;
 	}
 	//技术方向条件比较
 	if(curJson["tecAspectValue"] != oldJson["tecAspectValue"] && 
 			!(typeof curJson["tecAspectValue"] == "undefined" && typeof oldJson["tecAspectValue"] == "undefined")){
 		return false;
 	}
 	//培训类型"all/f2f/online"条件的比较
 	if(curJson["trainingType"] != oldJson["trainingType"] && 
 			!(typeof curJson["trainingType"] == "undefined" && typeof oldJson["trainingType"] == "undefined")){
 		return false;
 	}	
 	return true;
 }
 //比较Json内容是否相等。
 function jsonAllEqual(curJson,oldJson){
 	if(jsonEqual(curJson,oldJson) == false){
 		return false;
 	}else{
 		return true;
 	}
 }