如何用局部視圖展開/摺疊html表格？

Question

我試圖展開/摺疊表單行時單擊按鈕。目前我只能擴大這一行。

我想能夠摺疊它。

我正在使用局部視圖。 我試過這個：expand/collapse table rows with JQuery，但由於我在foreach循環中從sql-database加載數據，所以無法運行。

澄清：這擴大了表，但我錯過了我的JavaScript代碼的崩潰部分。提前致謝。

PartialView

<div class="table" id="logtable"> 
     <div class="row"> 
      <div class="cell" id="tableth"> 
       message 
      </div> 
     </div> 

     @foreach (var item in Model.Logs) 
     { 
      <div class="row"> 
       <div class="cell" id="tabletd"> 
        <input type="button" name="answer" value="Show Div" onclick="showDiv(@item.id.ToString())" /> 
        @Html.DisplayFor(modelItem => item.message) 
       </div> 
      </div> 
      <div class="row"> 
       <div id="@item.id.ToString()" style="display:none;" class="answer_list"> 
        <strong>Uri:</strong> @item.Uri <br/> 
        <strong>Method:</strong> @item.Method <br /> 
        <strong>HttpStatus:</strong> @item.HttpStatus <br /> 
       </div> 
      </div> 

使用Javascript（在我的HTML視圖）

<script type="text/javascript"> 
      function showDiv(message) { 
       document.getElementById(message).style.display = "block"; 
      } 
     </script> 

Answer 1

你想切換功能？檢查元素的狀態，然後選擇是否顯示或隱藏：

<script type="text/javascript"> 
      function showDiv(message) { 
       if(document.getElementById(message).style.display == 'block'){ 
        document.getElementById(message).style.display = "none"; 
       } 
       else{ 
        document.getElementById(message).style.display = "block"; 
       } 
      } 

</script> 

嚴格地說，這是純JavaScript，而不是jQuery的。如果你真的是使用jQuery，你可以把它更簡單：

 function showDiv(message) { 
      $('#'+message).toggle(); 
     } 

你甚至可以連去一個美麗的動畫：

 function showDiv(message) { 
      $('#'+message).slideToggle(); 

     } 

Answer 2

<style> 

#dvExpoByBatchDate .expandExpo { 
     background-image: url("../Images/Expand.gif"); 
     background-repeat: no-repeat; 
     background-position: center,center; 
    } 

    #dvExpoByBatchDate .expandExpoDisabled { 
     background-image: url("../Images/ExpandDisabled.gif"); 
     background-repeat: no-repeat; 
     background-position: center,center; 
    } 

    #dvExpoByBatchDate .collapseExpo { 
     background-image: url("../Images/Collapse.gif"); 
     background-repeat: no-repeat; 
     background-position: center,center; 
    } 


    </style> 

    //This is WrapperModel which contains all models for different level. 

public class WrapperModel 
    { 
     public List<Employee> ListEmployee; 
     public List<Manger> Listmanger; 
     public List<Programmer> ListProgrammer; 

    } 




    @model Model.WrapperModel 


    <script> 
    //Default set to collapse Parent Header 
    $("#dtExposure .relationshipExposure").attr('colspan', 1); 

    //Hide child columns 
    $(".subRelationshipExposure").hide(); 
</script> 

<style> 
    #dtExposure tr th { 
     cursor: default !important; 
    } 
    </style> 

    <table id="dtExposure" class="dbExposure display"> 
    @if (Model != null) 
    { 
     if (Model.ListEmployee!= null) -- Parent Row View 
     { 
      @Html.Partial("Exposure/_ParentPartial", Model) 
     } 
     if (Model.Listmanger!= null) -- child Row View 
     { 
      @Html.Partial("Exposure/_ChildPartial", Model) 
     } 
    } 
</table> 

    // Parent Partial View 

    @model Model.WrapperModel 


    <thead id="groupHead"> 
    <tr> 
     <th rowspan="2" style="background-color: #003675"></th> 

     <th rowspan="2" style="background-color: #003675">ID</th> 
     <th class="relationshipExposure sorting_disabled" colspan="4"   style="background-color: #003675"> 
      FullName <span>&#9658</span> 
    </tr> 
    <tr> 
     @*HiddenSubChildColumn*@ 
     <th style="background-color: #003675">FullName</th> 
     <th class="subRelationshipExposure" style="background-color: #003675">First Name</th> 
     <th class="subRelationshipExposure" style="background-color: #003675">Last Name</th> 
     <th class="subRelationshipExposure" style="background-color: #003675">Phone</th>  
    </tr> 
</thead> 

<tbody id="groupBody"> 
    @foreach (var item in Model.ListEmployee) 
    { 
     <tr> 
      <td id="toggleExposureRelationship" class="expandExpo emptyTd" style="background-color:white;border:none"></td>   
      <td>@item.CDL</td>   
      <td> 
       <span id="relationshipExpo" style="color: #0000ff; cursor: pointer">@item.FullName</span> 
      </td> 
      <td class="subRelationshipExposure">@item.FirstName</td> 
      <td class="subRelationshipExposure">@item.LastName</td> 
      <td class="subRelationshipExposure">@item.Phone</td>   
     </tr> 
    } 
</tbody> 




//Child Partial View 


    @model Model.WrapperModel 


    <thead id="customHead"> 
    <tr class="SubExposureCustomer" style="display: none"> 
     <th class="emptyTd"></th> 
     <th style="background-color: #003675">ID#</th> 
     <th style="background-color: #003675">Full Name</th> 
     <th style="background-color: #003675" class="subRelationshipExposure">First Nmae</th> 
     <th style="background-color: #003675" class="subRelationshipExposure">Last Namen</th> 
     <th style="background-color: #003675" class="subRelationshipExposure">Phone</th> 
</tr> 

<tbody id="customBody"> 
    @*Customer Level*@ 
    @foreach (var item in Model.Listmanger) 
    { 
     var currCustomerMasterId = item.CUSTOMERMASTERID; 
     <tr class="SubExposureCustomer" data-currcustomermasterid="@currCustomerMasterId" style="display: none"> 
         <td class="ExpoCustomerIcon expandExpo emptyTd" style="background-color:white;border:none"></td> 
      <td>@item.ID</td> 
      <td>@item.FULLNAME</td> 
      <td class="subRelationshipExposure">@item.FIRSTNAME</td> 
      <td class="subRelationshipExposure">@item.LASTNAME</td> 
      <td class="subRelationshipExposure">@item.PHONE</td> 
</tr> 


//For Pure MVC Grid Collapse 
function ToggleExposure(「relationshipExposure」, 「subRelationshipExposure」, 4) { 
    $(document).on("click", "." + className, function (e) { 
     var selfExposre = $("." + className); 
     var subSelfExposre = $("." + subclassName); 
     if (selfExposre.attr('colspan') == colspan) { 
      subSelfExposre.toggle(); 
      selfExposre.attr('colspan', 1); 
      isCollpase = false; 
     } 
     else { 
      subSelfExposre.toggle(); 
      selfExposre.attr('colspan', colspan); 
      isCollpase = true; 
     } 

     var varId = selfExposre.find("span"); 
     varId.empty(); 
     isCollpase ? varId.html("&#9668") : varId.html("&#9658"); 
    }); 
}