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 和 courseIdfunction 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中获取存储的条件信息，格式为jsonvar 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);}//判断当前的页码,初始设置0var 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; } }