Имам GridView, който има структура като тази:
група-заглавие
дълбочина-заглавие
- (some person entity)
- (някое физическо лице)
- (някое физическо лице)
дълбочина-заглавие
- (some person entity)
- (някое физическо лице)
- (някое физическо лице)
група-заглавие
дълбочина-заглавие
- (some person entity)
- (някое физическо лице)
- (някое физическо лице)
дълбочина-заглавие
- (some person entity)
- (някое физическо лице)
- (някое физическо лице)
Въпреки че имам Javascript, който превключва заглавието на раздела и под-елементите, които работят по предназначение, превключването не работи на ниво заглавие на групата, тъй като поделементите на един заглавен елемент могат да бъдат превключвани, но не и на друг заглавен елемент, така че когато превключването е активиран на ниво заглавка на групата, той просто обръща превключването, което не е това, което искам, така че се опитах да напиша някакъв Javascript, че когато се щракне върху заглавката на групата, той просто ще скрие всички едновременни редове, независимо от състоянието на превключване до следващата заглавка на групата ако не са били скрити, в противен случай щракването върху заглавката на групата ще покаже/разшири скритите редове, независимо от състоянието на превключване до следващата заглавка на групата.
Въпреки това не успях да разработя кода, така че когато се щракне върху заглавката на групата, той скрива всички следващи редове до следващата заглавка на групата, ако не са скрити, иначе ги показва. В момента се сблъсквам с "JavaScript runtime error: Unable to get property 'display' of undefined or null reference" на реда if (el.style.display != 'none'), което предполага, че не манипулирам правилно обекти, но не съм сигурен какви obj или attr трябва да манипулирам, за да постигна желания ефект, тъй като съм нов в Javascript.
Javascript:
<script type="text/javascript">
$(function () {
$('.group-header').click(function () {
$(this).nextUntil('.group-header').each(function () {
var el = this;
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}())
});
});
$(function () {
$('.dept-header').click(function () {
$(this).nextUntil('.dept-header, .group-header').toggle();
});
});
</script>
За справка моят код на Razor:
<table id="companyGrid" class="table table-bordered table-striped grid">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Designation)
</th>
<th>
@Html.DisplayNameFor(model => model.Department)
</th>
<th>
@Html.DisplayNameFor(model => model.Company)
</th>
<th>
@Html.DisplayNameFor(model => model.Year)
</th>
<th>
@Html.DisplayNameFor(model => model.Salary)
</th>
</tr>
@foreach (var group in Model.GroupBy(x => x.Company))
{
<tr class="group-header">
<td colspan="7">
<span class="h2">@group.Key</span>
</td>
</tr>
foreach (var dept in group.GroupBy(x => x.Department))
{
<tr class="dept-header">
<td colspan="6">
<span class="h4">@dept.Key</span>
</td>
</tr>
foreach (var item in dept)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Designation)
</td>
<td>
@Html.DisplayFor(modelItem => item.Department)
</td>
<td>
@Html.DisplayFor(modelItem => item.Company)
</td>
<td>
@Html.DisplayFor(modelItem => item.Year)
</td>
<td>
@Html.DisplayFor(modelItem => item.Salary)
</td>
</tr>
}
}
<tr class="group-footer">
<td colspan="6" class="text-center">
<span class="label label-info">Company: @group.Key</span>
<span class="label label-success">Total Employee: @group.Count()</span>
<span class="label label-primary">Avg Salary: @group.Average(x => x.Salary).ToString("C")</span>
</td>
</tr>
}
</table>
