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和ParentTermIdchildTermId = 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); }); }//获取用户选取的"类型"对应的termIdfunction getSelectedParentTermId(){var id = "";$("a[name='resourceType']").each(function(){if($(this).hasClass("selected")){id = $(this).attr("id");}});return id;}//获取用户选取的"类型"对应的termIdfunction 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 {//如果不是第一次加载列表，把查询参数写入BBQbbqQueryCondition["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(); } }); }