如何使用局部視圖展開/折疊html表？

Question

我在單擊按鈕時嘗試展開/折疊表格行。 目前我只能展開這一行。

我希望能夠崩潰它。

我正在使用局部視圖。 我試過這個： 用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");
    });
}