//"技术方向"值,默认全部
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;
}
}
详细解决方案
BBQ 回退运用实例
热度：132 发布时间：2013-01-06 15:44:47.0
相关解决方案