我试图在单击按钮时展开/折叠表行。目前我只能展开行。
我也想把它折叠。
我正在使用局部视图。我已经尝试过这个:扩展/折叠与JQuery表行，但不能让它工作，因为我从sql数据库加载数据在foreach循环。
澄清一下:这扩展了表，但是我错过了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>
是否需要切换功能?检查元素的状态，然后选择是显示还是隐藏:
<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();
}
<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>►</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("◄") : varId.html("►");
});
}