2016-01-13 64 views
1

我有四个内容选项卡,它在每个选项卡中展开了折叠图标,其中全部折叠和展开均可正常工作。我需要的是: 1.当我展开/折叠所有导航到其他选项卡并回来相同的选项卡比它会记住展开/折叠全部的状态。 2.但是,当我点击展开全部,展开后如果我点击一个项目作为折叠,如果我导航到其他选项卡,我回来比折叠一个项目不记得,它只是展开状态。 我想扩展所有,并希望点击一些项目崩溃,我想要rembeber既扩大所有和崩溃其中一些。全部折叠并展开只有一个项目

function getStudentHistoryReport(sT){ 
    $("#aExpand").text("Expand All");//Default all tabs showing Expand All 
    $("#ulTabs > li").removeClass("active"); 
    var sTN = sT.replace(/\s/g, ""); 
    $("#ulTabs > #" + sTN).addClass("active"); 
    if(sT == "Class Schedule"){ 
     $("#aExpand").hide(); 
     var lC = StarsUtility.GetData("getshclassschedule", {"lSID" : $("#SC_STUDENT_ID").val()}, true); 
     var sC = ""; 
     if(lC.length > 0){ 
      $("#divNoData").css('display', 'none'); 
      $.each(lC, function(i1, o1){ 
       sC += "<tr>"; 
       sC += "<td class='text-left'>"+ o1.teacherName +"</td>"; 
       sC += "<td class='text-left'>"+o1.className+" (Per "+ o1.period +", Sect "+o1.section+ ")" +"</td>"; 
       /*sC += "<td>"+o1.period+"</td>"; 
      sC += "<td>"+o1.section+"</td>";*/ 
       /*sC += "<td>A</td>"; 
      sC += "<td><div class='progressBar' id='max96'></div></td>";*/ 
       sC += "</tr>"; 
      }); 
      $("#tbdClass").html(sC); 
      $("#divClassSchedule").show(); 
     } else {$("#divNoData").html("No Class Schedule data."); $("#divNoData").css('display', '');} 
     $("#divTabs").hide(); 
     $("#divReportTab").hide(); 
    } else { 
     var mp = StarsUtility.GetData("getshreport", {"lSID" : $("#SC_STUDENT_ID").val(), "sTab" : sT}, true); // year as key and value as map 
     oSH.studentHistoryReport = mp; 
     if(StarsUtility.GetSize(mp) == 0) {$("#divNoData").html("No Assessments data."); $("#divNoData").css('display', ''); $("#aExpand").hide();} //You could use StarsUtility.GetSize() 
     else{$("#divNoData").css('display', 'none'); $("#aExpand").show();} 
     var sH = ""; 
     sH += '<ul>'; 
     var Tl = 0; // Total length of Assessments in all years. 
     $.each(mp, function(k, v){ 
      Tl += StarsUtility.GetSize(v); 
     }); 
     var lT = (sTN in oSH.mpRemove) ? oSH.mpRemove[sTN] : new Array(); 
     if(Tl != lT.length){ 
     $.each(mp, function(k, v){ 
      var yr = k.replace("___", ""); 
      var mT = v; 
      var lH = new Array(); 
      for(var i1 in mT) { 
       var oSH1 = mT[i1]; 
       lH = Object.keys(oSH1.scoreTopic); 
       break; 
      } 
       sH += '<li><span class="plus-minus" id="spYear_'+yr +'_' + sTN +'" onclick="toggleYearandAssessment(this, 1);"><i id="icon_spYear_' + yr + '_' + sTN +'" class="text-orange icon-minus-sign" name="iYearPlusMinus"></i></span>'; 
      sH += '<h5>'+yr+'</h5>'; 
       sH += '<ul id="ulYear_'+yr +'_' + sTN +'" name="ulYear"><li>'; 
       sH += '<table class="table" style="width: 830px;">'; 
      sH += '<thead><tr>'; 
      sH += '<th class="text-left" colspan="2">Assessment Name</th>'; 
      sH += '<th>Subject</th>'; 
      sH += '<th>Test Date</th>'; 
      sH += '<th>Level<br/>Tested</th>'; 
      for(var h=0; h<lH.length; h++){ 
       if(lH[h] == "null") continue; 
       if(lH[h] == "Raw Score") sH += '<th>Raw<br/>Score</th>'; 
       else if(lH[h] == "Scale Score") sH += '<th>Scale<br/>Score</th>'; 
       else sH += '<th>'+lH[h]+'</th>'; 
      } 
      sH += '<th>Hide</th>'; 
      sH += '</tr></thead><tbody>'; 
      $.each(mT, function(k1, v1){ 
       var o1 = v1; 
       if(null != o1.assessmentName) { //This is not correct. Just adding this to make local assessment tab working for lawndale fix. 
        var lSO = ((o1.objectives && o1.objectives.length > 0) ? o1.objectives : o1.standards); 
         sH += '<tr id="tr_'+k1.replace("___", "")+'" style='+(jQuery.inArray(parseInt(k1.replace("___", "")), lT) > -1 ? "display:none" : "")+'>'; 
        sH += '<td style="width: 20px;">'; 
        sH += '<span class="plus-minus toggle-assess-info" id="sp_'+k1.replace("___", "")+'" onclick="toggleYearandAssessment(this, 2);">'; 
        if(lSO.length > 0) sH += '<i class='+(jQuery.inArray(("sp_"+k1.replace("___", "")), oSH.lstTIds) > -1 ? ("icon-minus-sign") : "icon-plus-sign")+' name="iPlusMinus"></i>'; 
        sH += '</span></td>'; 
        sH += '<td class="text-left">'+o1.assessmentName+'</td>'; 
        sH += '<td>'+ o1.subjectName +'</td>'; 
        sH += '<td>'+ o1.testDate +'</td>'; 
        sH += '<td>'+ o1.gradeLevelTest+'</td>'; 
        for(var h = 0; h < lH.length; h++){ 
         if(lH[h] == "null") continue; 
         var sFN = ((!StarsUtility.IsEmptyObject(o1.scoreTopic) && (StarsUtility.IsValidObject(o1.scoreTopic[lH[h]]) && o1.scoreTopic[lH[h]].indexOf(".000") > -1 && lH[h] != "Percent Correct")) ? parseInt(o1.scoreTopic[lH[h]]) : o1.scoreTopic[lH[h]]);// Percent Correct, Raw Score we will get .000 
         if(lH[h] == "Performance Level") { 
          sH += '<td><i class='+(sFN != "-" ? "bubble-7" : "")+' style="height: auto; width: auto; ' + (sFN != "-" ? 'border-color:#'+o1.performanceLevelColor+'!important"' : '') +'>' + (sFN) +'</i></td>'; 
         } else if(lH[h] == "Percent Correct"){ 
          var sA = new Array(); 
          if(StarsUtility.IsValidObject(sFN) && sFN.indexOf("|~|") > -1) sA = sFN.split("|~|"); 
          var iPc = ((StarsUtility.IsValidObject(sFN) && sFN.indexOf("|~|")) > -1 ? ((StarsUtility.IsNumber(sA[0]) && sA[0] > -1 && sA[1] > -1) ? ((parseFloat(sA[0])/parseFloat(sA[1])) * 100).toFixed(oSH.decimalCount) + "%" : "-") : sFN); 
          if(iPc != "-") iPc = isNaN(parseFloat(iPc).toFixed(oSH.decimalCount)) ? "-" : parseFloat(iPc).toFixed(oSH.decimalCount); 
          sH+= (iPc == '-' ? '<td>-</td>' : '<td class="col-perc-bar-1"><div class="percent">' +iPc+'%</div><div class="progressBar" id="max'+iPc+'"><div style="width: '+iPc+'%; background:#'+o1.performanceLevelColor+'!important;"></div></div></td>'); 
          } else { 
           if(lH[h] == "Raw Score") sFN = StarsUtility.RemoveTrialingZero(sFN.toString()); 
           sH += '<td>'+ ((lH[h] == "Raw Score" || lH[h] == "Scale Score") ? (StarsUtility.IsNumber(sFN) && parseInt(sFN) > -1 ? sFN : (sFN != "" && sFN != "-1" ? sFN : "-")) : (sFN == "-1" ? (sFN != "" ? "-" : sFN) : sFN)) +'</td>'; 
          } 
        } 
         sH += '<td><a id="stundethistoryhide_'+k1.replace("___", "")+'" onmouseover="javascript:CommonFunctions.AddToolTip(this.id,\'Hide\');" onmouseup="javascript:CommonFunctions.DeleteToolTip(this.id);" href="javascript:void(0);" class="btn btn-small" onclick="javascript:removeRow('+k1.replace("___", "")+', '+ Tl +', \''+ sTN +'\');"><i class="icon-remove"></i></a></td>'; //This is not correct. Why you need length of the object for each iteration of the object 
        sH += '</tr>'; 
        if(lSO.length > 0) { 
         sH += '<tr class="assess-info-row" style='+(jQuery.inArray(("sp_"+k1.replace("___", "")), oSH.lstTIds) > -1 ? "" : "display:none;")+' id="std_'+k1.replace("___", "")+'">'; 
         sH += '<td colspan="9">';//You cant't hardcode colspan here. This should come dynamically based on score topic's 
         sH += '<table class="table table-condensed table-borderless" id="tbl_'+k1.replace("___", "")+'" style="width:800px; table-layout:fixed;">'; 
         sH += '<tbody>'; 
         sH += '<tr>'; 
         for(var ss=1; ss<=lSO.length; ss++){ 
         var sST = lSO[ss-1].split("|~|"); 
         sH += (sT == "CELDT" ? '<td class="text-left">' +sST[0] + '<div>' + parseInt(sST[1]) + '</div></td>' : '<td><div class="text-left">' +sST[0] + '</div><div class="col-perc-bar-sh"><div class="progressBar" id="max'+(parseInt(sST[1]) > 100 ? 100 : sST[1])+'" style="width:120px; margin:0 auto text-align:left;"><div style="width: '+(parseInt(sST[1]) > 100 ? 100 : sST[1])+'%;"></div></div><div class="percent">' + (parseFloat(sST[1]) > 100 ? 100 : parseFloat(sST[1]).toFixed(oSH.decimalCount)) + '%</div></div></td>'); 
          if(ss % 5 == 0) sH += '</tr><tr>'; 
         } 
         sH += '</tr>'; 
         sH += '</tbody>'; 
         sH += '</table>'; 
         sH += '</td></tr>'; 
        } 
       } 
      }); 
      sH += '</tbody></table>'; 
      sH += '</li></ul></li>'; 
     }); 
     } else {$("#divNoData").html("No Assessments data."); $("#divNoData").css('display', ''); $("#aExpand").hide();} 
     sH += '</ul>'; 
     $("#divTabs").html(sH); 
     $("#divClassSchedule").hide(); 
     $("#divTabs").show(); 
     $("#divReportTab").show(); 
     $("i.icon-minus-sign").addClass("text-orange"); 
     for(var i = 0; i < oSH.lstTIds.length; i++){ 
      var y = oSH.lstTIds[i].split("_"); 
      $("#ulYear_" + y[1] + "_" +y[2]).slideToggle(); 
      $("#icon_" + oSH.lstTIds[i]).removeClass('icon-minus-sign text-orange').addClass('icon-plus-sign'); 
     } 
     var sTab = (oSH.mpTabStatus[sT] ? oSH.mpTabStatus[sT] : "");//: We are remembering the Expand all and Collapse all while nevagating the tabs in Student History popup. 
     if(sTab == "Expand All"){ 
      oSH.lstTIds.push(sTab + "_All"); 
      $("#aExpand").text("Expand All"); 
      expandCollapseAll(); 
     }else if(sTab == "Collapse All"){ 
      oSH.lstTIds.splice($.inArray(sTab + "_All", oSH.lstTIds)); 
      $("#aExpand").text("Collapse All"); 
      expandCollapseAll(); 
     } 
    } 
} 

这上面的方法,我写出示学生历史与四个选项卡,并在此我呼吁toggleYearandAssessment(这一点,2)本会去expandCollapseAll(O,I)方法和toggleYearandAssessment(这一点,1)这将切换YarandAssessment(这,1),在这种方法我想记住扩大全部和其中一些崩溃。

/** 
* Function to toggle Year and Assessment Names to get Standards. 
* @param o contains tr id. 
* @since v1.0 
*/ 
function toggleYearandAssessment(o, i){ 
    if(i == 2){ 
     $(o).parents("tr").next().slideToggle(); 
     $(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign'); 
    if($(o).children().hasClass("icon-minus-sign")) { 
       if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);} 
       console.log("oSH.lstTIds checking in toggleyrAss if ------- " +oSH.lstTIds); 
    } else { 
     if($(o).children().hasClass("icon-plus-sign")) { 
      if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);} 
      console.log("oSH.lstTIds checking in toggleyrAss if +++ " +oSH.lstTIds); 
     } 
    } 
    } else { 
     console.log("else for +"); 
     if($(o).children().hasClass("icon-plus-sign")) { 
       console.log("oSH.lstTIds checking in toggleyrAss if +++ " +oSH.lstTIds); 
      if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);} 
     } else { 
       console.log("oSH.lstTIds checking in toggleyrAss if +++ " +oSH.lstTIds); 
      if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);} 
     } 
     var lUL = o.id.split("_"); 
     $("#ulYear_" + lUL[1] + "_" +lUL[2]).slideToggle(); 
     $(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign'); 
    } 
    if(!$("i[name=iYearPlusMinus]").hasClass("icon-minus-sign")) $("#aExpand").text("Expand All"); 
} 
/** 
* Method to expand/Collapse all years and standards. 
*/ 
function expandCollapseAll(o,i){ 
    var tab = ''; 
    $('#ulTabs .active').each(function() { 
     tab = $(this).text(); 
    }); 
    //oSH.lstTIds = new Array(); 
    if($("#aExpand").text() == "Expand All"){ 
     oSH.mpTabStatus[tab] = "Expand All";//oSH.mpTabStatus[tab] it contains current tab values 
     if(jQuery.inArray(tab + "_All", oSH.lstTIds) == -1)oSH.lstTIds.push(tab + "_All"); 
     // if(jQuery.inArray(sp_, oSH.lstTIds) > -1 ? ("icon-minus-sign") : "icon-plus-sign")+' name="iPlusMinus"></i>'; 
     $("i[name=iPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange"); 
     $("i[name=iYearPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange"); 
     $("ul[name=ulYear]").show(); 
     $(".assess-info-row").show(); 
     for(var i=0; i<oSH.lstRemove.length; i++){ 
      $("#std_"+oSH.lstRemove[i]).hide(); 
     } 
     $("#aExpand").text("Collapse All"); 
    } else { 
     ($("#aExpand").text() == "Collapse All") 
     oSH.mpTabStatus[tab] = "Collapse All";//oSH.mpTabStatus[tab] it contains current tab values 
     if(oSH.lstTIds.length > 0 && jQuery.inArray(tab + "_All", oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(tab + "_All", oSH.lstTIds),1);} 
     $("i[name=iPlusMinus]").removeClass("icon-minus-sign text-orange").addClass('icon-plus-sign'); 
     $(".assess-info-row").hide(); 
     $("ul[name=ulYear]").hide(); 
     $("#aExpand").text("Expand All"); 
    } 
} 
+1

我不认为任何人都可以读什么,现在你已经尝试过的代码..更好地创造一个小提琴和演示... –

+0

作为从服务中,我不能在运行即时得到价值小提琴。只是我想要如何记住它们中的一些在Exapnd All中崩溃,因为我们可以记住全部崩溃和全部展开 – MJR

回答

0

在默认方法中声明一个数组:oSH.lstRemTIds = new Array(); 比推功能toggleYearandAssessment所选项目此阵列(O,I)为:

function toggleYearandAssessment(o, i){ 
    if(i == 2){ 
     $(o).parents("tr").next().slideToggle(); 
     $(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign'); 
     if($(o).children().hasClass("icon-minus-sign")) { 
      if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);} 
     } else { 
      if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);} 
     } 
     if(jQuery.inArray(o.id, oSH.lstRemTIds) == -1) {oSH.lstRemTIds.push(o.id);} 
    } else { 
     if($(o).children().hasClass("icon-plus-sign")) { 
      if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);} 
     } else { 
      if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);} 
     } 
     var lUL = o.id.split("_"); 
     $("#ulYear_" + lUL[1] + "_" +lUL[2]).slideToggle(); 
     $(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign'); 
    } 
    if(!$("i[name=iYearPlusMinus]").hasClass("icon-minus-sign")) $("#aExpand").text("Expand All"); 
} 

并添加如果(expandCollapseAll.arguments [0] & & expandCollapseAll.arguments [0] == 1)条件中功能expandCollapseAll()方法:

function expandCollapseAll(){ 
    var tab = ''; 
    $('#ulTabs .active').each(function() { 
     tab = $(this).text(); 
    }); 
    //oSH.lstTIds = new Array(); 
    if($("#aExpand").text() == "Expand All"){ 
     oSH.mpTabStatus[tab] = "Expand All";//oSH.mpTabStatus[tab] it contains current tab values 
     if(jQuery.inArray(tab + "_All", oSH.lstTIds) == -1)oSH.lstTIds.push(tab + "_All"); 
     $("i[name=iPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange"); 
     $("i[name=iYearPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange"); 
     $("ul[name=ulYear]").show(); 
     $(".assess-info-row").show(); 
     for(var i=0; i<oSH.lstRemove.length; i++){ 
      $("#std_"+oSH.lstRemove[i]).hide(); 
     } 
     $("#aExpand").text("Collapse All"); 
    } else { 
     oSH.mpTabStatus[tab] = "Collapse All";//oSH.mpTabStatus[tab] it contains current tab values 
     if(oSH.lstTIds.length > 0 && jQuery.inArray(tab + "_All", oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(tab + "_All", oSH.lstTIds),1);} 
     $("i[name=iPlusMinus]").removeClass("icon-minus-sign text-orange").addClass('icon-plus-sign'); 
     $(".assess-info-row, #ulYear").hide(); 
     $("#aExpand").text("Expand All"); 
    } 
    if(expandCollapseAll.arguments[0] && expandCollapseAll.arguments[0] == 1){ 
     $.each(oSH.lstRemTIds, function(k1, v1){ 
      if($("#aExpand").text() == "Collapse All"){ 
       $("#"+v1).parents("tr").next().slideToggle(); 
       $("#"+v1 + " > i ").removeClass("icon-minus-sign text-orange").addClass('icon-plus-sign'); 
      }else{ 
       $("#"+v1).parents("tr").next().slideToggle(); 
       $("#"+v1 + " > i ").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange"); 
      } 
     }); 
    } else oSH.lstRemTIds = new Array(); 
}