bbq运用实例二 _Web前端

bbq使用实例二
//BBQ使用的变量声明
var bbqQueryCondition = {};
//当前页码
var currentPageIndex;
//首次加载列表标记
var firstLoad = true;	
//定义全局变量
var termId = "";
//"类型"选择
var parentTermId;
//"认证项目"
var childTermId;
//点击"认证类型"时的flag标示
var flag = true;
/**
 * 界面ready时默认操作
 * 三个主方法可以再调用具体细分的方法
 */
$(function() {
	//页面UI初始化
	initUI(); 
	// 添加页面监听
	initListener();
});

/**
 * 界面布局及样式调整
 * <p>
 * 界面的大部分样式已经在CSS中定义好，这里主要是添加一些需要JS控制的特殊样式<br>
 * 比如表格中底色单行深双行浅等
 */
function initUI() {
	//读取参数，优先取BBQ中参数
	bbqQueryCondition = NAVI.bbq.getState();
	
	//从BBQ中获取传入到action侧的termId, 如果没有说明是第一次访问"考试大纲"
	if(typeof bbqQueryCondition["termId"] == "undefined"){
		termId = "defaultAllType";
	}else{
		termId = bbqQueryCondition["termId"];
	}
	
	currentPageIndex = bbqQueryCondition["beginPage"] || 0;
	
	//获取bbq中存取的存入的childTerm和ParentTermId
	childTermId = bbqQueryCondition["childTermId"];
	parentTermId = bbqQueryCondition["parentTermId"];
	
	if(typeof bbqQueryCondition["parentTermId"] == "undefined"){
		parentTermId = "defaultAllType";
	}
	//给"认证类型"添加样式
	$("#"+parentTermId).addClass("selected");
	
	//依据"类型"的termId来动态获取
	getexamOutlineChildTerm(parentTermId);
	
	//给"认证项目"添加样式
	if(typeof bbqQueryCondition["childTermId"] == "undefined" ){
		childTermId = "defaultAll";
	}
	$("#exam_outline_records").empty('');
	//如果用户选择的是"认证项目"中的全部，则需要传递其父termId,作为参数传递到action侧查询数据
	if(termId == "defaultAll"){
		termId = parentTermId;
	}
	queryData(termId); 
}
//点击页面考试大纲的标题转向到其详细页面。
function loadExamOutlineDetail(nodeId){
	NAVI.forward('spte-exam-outline-show',{nodeId:nodeId}, true);
}

 /**
  * 添加页面监听
  * <p>
  * 比如选择"类型"或者选择"认证"件，重新刷新页面数据<br>
  * 由于页面数据是实时刷新的，很多时候需要对某一类元素添加事件，<br>
  * 那么后加入的元素可能未能绑定。<br>
  * 所以这里的事件绑定，对于一开始就存在界面上的元素，使用本身的绑定函数<br>
  * 对于动态添加的元素，使用$.live绑定事件。
  */
 function initListener(){
	 
	 
	 //监听页面"类型"事件
	 $("a[name='resourceType']").die().live("click", function() {
		  //用户切换"类型"时,需要重新改变
		  $("a[name='resourceType']").removeClass("selected");
		  
		  $(this).addClass("selected");
		  termId = $(this).attr("id");
		  //切换"类型"后加载列表第一页
		  currentPageIndex=0;
		  //向BBQ中存放当前用户选择的"类型"对应的termId;
		  bbqQueryCondition["termId"] = termId;
		  bbqQueryCondition["beginPage"] = 0;
		  //记入所选的"类型"
		  bbqQueryCondition["parentTermId"] = termId; 
		  parentTermId = termId;
		  
		  //当用户切换"类型"时,默认"认证类型"选择"全部",记入到BBQ。
		  if(flag){
			  childTermId = "defaultAll";
		  }else{
			  childTermId = getSelectedChildTermId();
		  }
		  if(typeof childTermId == "undefined" || childTermId == ""){
			  childTermId = "defaultAll";
		  }else if(childTermId != "defaultAll"){
			  
			  termId = childTermId;
		  }
		  
		  bbqQueryCondition["childTermId"] = childTermId;  
		  
		  bbqQueryCondition["isExamOutlineOrSimExam"] = "examOutline";
		  NAVI.bbq.pushState(bbqQueryCondition);
		  //根据"类型"，动态的加载"认证类型"的显示
		  getexamOutlineChildTerm(parentTermId);
		  //加载列表页面。
		  queryData(termId);
	  });
	 
	 
	 //监听页面"认证项目"事件
	$("a[name='certiResType']").die().live("click", function() {
		  $("a[name='certiResType']").removeClass("selected");
		  $(this).addClass("selected");
		  termId = $(this).attr("id");
		  //切换"认证类型"后加载列表第一页
		  currentPageIndex=0;		  
		  //向BBQ中存放当前用户选择的"类型"对应的termId;
		  bbqQueryCondition["termId"] = termId;
		  bbqQueryCondition["beginPage"] = 0;
		  //向BBQ中记入用户选择的"类型"
		  bbqQueryCondition["parentTermId"] = getSelectedParentTermId();
		  //向BBQ中记入用户选择的"认证类型"对应的termId, 用于BBQ回退时样式调整用
		  bbqQueryCondition["childTermId"] = termId;
		  childTermId = termId;
		  bbqQueryCondition["isExamOutlineOrSimExam"] = "examOutline";
		  NAVI.bbq.pushState(bbqQueryCondition);
		  if(termId == "defaultAll"){
			  termId = getSelectedParentTermId();
		  }
		 queryData(termId);
		  
	});
 }

//获取用户选取的"类型"对应的termId
function getSelectedParentTermId(){
	var  id = "";
	$("a[name='resourceType']").each(function(){
		if($(this).hasClass("selected")){
			id = $(this).attr("id");
		}
	});
	return  id;
	
}
//获取用户选取的"类型"对应的termId
function getSelectedChildTermId(){
	var id = "";
	$("a[name='certiResType']").each(function(){
		if($(this).hasClass("selected")){
			id = $(this).attr("id");
		}
	});
	return id;
}


/**
 * ajax 异步获取下拉框中需要展现的内容   <传入的参数待定>
 */	 
function getexamOutlineChildTerm(termId){
	var param= '{"termId":"'+termId+'"}';
	$.ajaxSetup({cache:true});
	$.ajax({
		cache: true,
		type: "POST",
		url: "Certificate!getTermChildByTermId.action",
		data: $.parseJSON(param),
		dataType: "json",
		success: function(childTerms){
			$("#eo_sel_type").empty();
			var str = "";
			$.each(childTerms, function(i, n){
				str += "<span style='line-height: 22px;float: left;dispaly: inline-block;'>";
				str +=  "<a href='javascript:void(0)' name='certiResType' id='"+childTerms[i].id+"' value='"+childTerms[i].value+"'>"+childTerms[i].value+"</a>";
				str += "</span>";
			});	
			$("#eo_sel_type").append(str);
			$("#"+childTermId).addClass("selected");
		}
	});  
 }
 
 function queryData(param){
	var param= '{"termId":"'+termId+'","isExamOutlineOrSimExam":"examOutline"}';
	var lock_screen = new sui.cbb.blockUI();
	lock_screen.block(true);
	$.ajaxSetup({cache:true});
	$.ajax({
		cache: true,
		type: "POST",
		url: "Certificate!getResultTotalRow",
		data: $.parseJSON(param),
		dataType: "json",
		success: function(data){
			if(data.totalRow <1){
				$("#exam_outline_records").empty();
				$("#examOutlinePaging").empty();
				var inner = "<ul class='re_container'>";
				inner+="<li class=re_content style='color:red;width: 100%;padding-top: 10px;'>"+$("#noData").val()+"</li>";
				inner+="</ul>";
				$("#exam_outline_records").html(inner);
				new sui.cbb.initPaginationByIndex($("#examOutlinePaging"), data.totalRow, 10, parseInt(currentPageIndex),doNothing);
			}else{
				//cbb分页控件
				new sui.cbb.initPaginationByIndex($("#examOutlinePaging"), data.totalRow, 10, parseInt(currentPageIndex),examOutlineCallback);			
			}
			new sui.cbb.blockUI().unBlock();
		},
		error : function() {
			var errorEx = $("#queryError").val();
			$("#exam_outline_records").html(errorEx);
				new sui.cbb.blockUI().unBlock();
		}
	}); 
 }
 function doNothing(){}
 
  //输出类容
 function refreshTable(arrayData){
	if(!arrayData){
		return false;
	}
	var strTrData = "<table width='100%' border='0' cellspacing='0' cellpadding='0' style='padding-top: 10px;' id='listTable'>";
	for(var i=0 ; i<arrayData.length; i++) 
	{
		strTrData += "<tr><td style='font-size:12px; color:#900; line-height:22px;padding-top:5px;'><a href='javascript:loadExamOutlineDetail(\""+arrayData[i].id+"\")';><span style='color:#900;'>" +encodeHtml( arrayData[i]['name'])  + "</span></a></td></tr>";
		strTrData += "<tr><td class='intro enterprise_td' title='"+encodeHtml(arrayData[i]['abstracts'])+"'>"+ encodeHtml(arrayData[i]['abstracts'])  +"</td></tr>";
	}
	strTrData += "</table>";
	$("#exam_outline_records").empty();
	$("#exam_outline_records").append(strTrData);
 } 
 
//分页控件之回调函数，其中  currentPage 此变量从0开始递增
 function examOutlineCallback(currentPage, pageSize)
 {
	//判断是否是第一次加载内容。
	if(firstLoad) {
		firstLoad=false;
	}else {
		//如果不是第一次加载列表，把查询参数写入BBQ
		bbqQueryCondition["termId"] = termId;
		bbqQueryCondition["beginPage"] = currentPage;
		bbqQueryCondition["isExamOutlineOrSimExam"] = "examOutline";
		bbqQueryCondition["childTermId"] = childTermId;
		bbqQueryCondition["parentTermId"] = parentTermId;
	
		NAVI.bbq.pushState(bbqQueryCondition);
	}
	var  begin = currentPage * pageSize + 1;
	var queryParam={};
	queryParam["termId"]=termId;
	queryParam["beginPage"]=begin;
	queryParam["pageSize"]=pageSize;
	queryParam["isExamOutlineOrSimExam"] = "examOutline";
	
 	//传入的参数需要待确定
	var param= '{"termId":"'+termId+'","isExamOutlineOrSimExam":"examOutline","beginPage":"'+begin+'","pageSize":"'+pageSize+'"}';
	$.ajax({
		cache: false,
		type: "POST",
		url: "Certificate!getResultList",
		data:  queryParam,
		dataType: 'json',
		success: function(data)
		{
			//刷新数据展现区域数据
			refreshTable(data);
			new sui.cbb.blockUI().unBlock();
		},
		error: function(){
			var errorEx = $("#queryError").val();
			$("#exam_outline_records").html(errorEx);
 				new sui.cbb.blockUI().unBlock();
 		}
	
 	}); 
 }