Javascript 基于id切换MVC表行的可见性
在我的MVC Razor视图中,我有一个表,其中的行表示层次结构的两个级别。可以单击每一行,通过ajax调用加载partialview内容区域。这个很好用 为了有一个更紧凑的列表,我现在想把表变成一个“轻折叠树视图”。第二级中的行应仅在单击其标题行时可见。单击另一个标题行时,应折叠/使所有当前子行不可见,并展开新的子视图集 我主要是一个代码隐藏者,不太习惯客户端脚本。我尝试过几种方法,但迄今为止没有成功。我读过一些建议,但它们都略有不同,并不直接适用。这是我目前的尝试:Javascript 基于id切换MVC表行的可见性,javascript,ajax,toggle,row,visibility,Javascript,Ajax,Toggle,Row,Visibility,在我的MVC Razor视图中,我有一个表,其中的行表示层次结构的两个级别。可以单击每一行,通过ajax调用加载partialview内容区域。这个很好用 为了有一个更紧凑的列表,我现在想把表变成一个“轻折叠树视图”。第二级中的行应仅在单击其标题行时可见。单击另一个标题行时,应折叠/使所有当前子行不可见,并展开新的子视图集 我主要是一个代码隐藏者,不太习惯客户端脚本。我尝试过几种方法,但迄今为止没有成功。我读过一些建议,但它们都略有不同,并不直接适用。这是我目前的尝试: <table st
<table style="width: 100%;">
<tr>
<td style="width: 30%; vertical-align: top;">
<table id="myTableTree" style="width: 100%;">
@foreach (var testSuite in Model.TestSuites)
{
<tr>
<th colspan="2" style="text-align: left;">
@Ajax.ActionLink(testSuite.Description, "GetContent", new { testSuiteId = testSuite.Id }, new AjaxOptions { UpdateTargetId = "subContent" }, new { onClick = "setShowState(" + testSuite.Id + ");" })
</th>
</tr>
foreach (var testCase in testSuite.TestCases)
{
<tr itemprop="@testSuite.Id" style="display: none;">
<td> </td>
<td>
@Ajax.ActionLink(testCase.Description, "GetContent", new { testCaseId = testCase.Id }, new AjaxOptions { UpdateTargetId = "subContent" })
</td>
</tr>
}
}
</table>
</td>
<td style="vertical-align: top;" id="subContent"></td>
</tr>
</table>
<script type="text/javascript">
function setShowState (testSuiteId)
{
var rows = document.getElementById('myTableTree').rows;
for (var i = 0; i < rows.length; i++)
{
var row = rows.item(i);
if (row.attributes['itemprop'] == testSuiteId)
row.style.display = 'block';
else
row.style.display = 'none';
}
};
</script>
@foreach(Model.TestSuites中的var testSuite)
{
@ActionLink(testSuite.Description,“GetContent”,新的{testSuiteId=testSuite.Id},新的AjaxOptions{UpdateTargetId=“Subcent”},新的{onClick=“setShowState”(+testSuite.Id+”);“})
foreach(testSuite.TestCases中的var testCase)
{
@ActionLink(testCase.Description,“GetContent”,新的{testCaseId=testCase.Id},新的AjaxOptions{UpdateTargetId=“subcent”})
}
}
函数setShowState(testSuiteId)
{
var rows=document.getElementById('myTableTree').rows;
对于(变量i=0;i
如您所见,所有子视图最初都设置为display=none。我抓取了一个任意属性来保存第二级行上的第一级id。itemprop似乎和任何一个都一样好。在第一级行中,我添加了一个引用javascript函数的onClick调用。setShowState函数的目的是循环所有行,并为行设置适当的可见性。当我检查生成的页面源代码时,它看起来与我预期的一样,但不起作用。子窗口永远不会展开
1) 是否可以将初始服务器返回的行显示设置为none,然后在客户端进行切换
2) 让actionlink触发ajax服务器调用并触发客户端脚本来设置可见性可以吗?或者最好将ajax调用移动到java脚本中,使其只有一个调用
3) 使用display=block/none或visibility=visible/collapse切换是否更好?实际上会有什么不同吗
4) 可以使用itemprop存储父id吗?我看到许多人在类似的情况下使用class属性。类属性可以与纯整数值一起使用吗
5) 以我想要的方式切换行的最快方法是什么?循环所有行是否太慢?我将有10-20个标题行,每个标题行有2-10个子行
6) 整个设计糟糕吗?我在MVC工具箱中没有找到treeview控件,因此我决定这样做。我认为这看起来至少和树视图一样好,但也许另一种方法会更好
7) jQuery有什么帮助吗?我在布局页面中包含了jQuery库,但我不知道如何使用它。在表达一个详细的问题非常清晰之前,我已经多次这样做了。在检查了稍微多一些之后,我意识到我错过了解析属性的语法。此示例现在完全起作用:
<table style="width: 100%;">
<tr>
<td style="width: 30%; vertical-align: top;">
<table id="myTableTree" style="width: 100%;">
@foreach (var testSuite in Model.TestSuites)
{
<tr>
<th colspan="2" style="text-align: left; border: 0;">
@Ajax.ActionLink(testSuite.Description, "GetContent", new { testSuiteId = testSuite.Id }, new AjaxOptions { UpdateTargetId = "subContent" }, new { onClick = "setShowState(" + testSuite.Id + ");" })
</th>
</tr>
foreach (var testCase in testSuite.TestCases)
{
<tr data-testSuiteId="@testSuite.Id" style="visibility: collapse;">
<td style="width: 10%; border: 0;"> </td>
<td style="border: 0;">
@Ajax.ActionLink(testCase.Description, "GetContent", new { testCaseId = testCase.Id }, new AjaxOptions { UpdateTargetId = "subContent" })
</td>
</tr>
}
}
</table>
</td>
<td style="vertical-align: top;" id="subContent"></td>
</tr>
</table>
<script type="text/javascript">
// Toggle each section independantly
function setShowState(testSuiteId) {
var rows = document.querySelectorAll('[data-testSuiteId="' + testSuiteId + '"]');
for (var i = 0; i < rows.length; i++) {
var row = rows.item(i);
row.style.visibility = (row.style.visibility == 'visible') ? 'collapse' : 'visible';
}
};
// Alternative algorithm
// Always collapse previous section when a new one is selected
function setShowState2(testSuiteId) {
var rows = document.getElementById('myTableTree').rows;
for (var i = 0; i < rows.length; i++) {
var row = rows.item(i);
if (row.getAttribute('data-testSuiteId') == testSuiteId)
row.style.visibility = 'visible';
else if (row.getAttribute('data-testSuiteId') != null)
row.style.visibility = 'collapse';
}
};
</script>
很多时候,表达一个详细的问题是非常清晰的。在检查了稍微多一些之后,我意识到我错过了解析属性的语法。此示例现在完全起作用:
<table style="width: 100%;">
<tr>
<td style="width: 30%; vertical-align: top;">
<table id="myTableTree" style="width: 100%;">
@foreach (var testSuite in Model.TestSuites)
{
<tr>
<th colspan="2" style="text-align: left; border: 0;">
@Ajax.ActionLink(testSuite.Description, "GetContent", new { testSuiteId = testSuite.Id }, new AjaxOptions { UpdateTargetId = "subContent" }, new { onClick = "setShowState(" + testSuite.Id + ");" })
</th>
</tr>
foreach (var testCase in testSuite.TestCases)
{
<tr data-testSuiteId="@testSuite.Id" style="visibility: collapse;">
<td style="width: 10%; border: 0;"> </td>
<td style="border: 0;">
@Ajax.ActionLink(testCase.Description, "GetContent", new { testCaseId = testCase.Id }, new AjaxOptions { UpdateTargetId = "subContent" })
</td>
</tr>
}
}
</table>
</td>
<td style="vertical-align: top;" id="subContent"></td>
</tr>
</table>
<script type="text/javascript">
// Toggle each section independantly
function setShowState(testSuiteId) {
var rows = document.querySelectorAll('[data-testSuiteId="' + testSuiteId + '"]');
for (var i = 0; i < rows.length; i++) {
var row = rows.item(i);
row.style.visibility = (row.style.visibility == 'visible') ? 'collapse' : 'visible';
}
};
// Alternative algorithm
// Always collapse previous section when a new one is selected
function setShowState2(testSuiteId) {
var rows = document.getElementById('myTableTree').rows;
for (var i = 0; i < rows.length; i++) {
var row = rows.item(i);
if (row.getAttribute('data-testSuiteId') == testSuiteId)
row.style.visibility = 'visible';
else if (row.getAttribute('data-testSuiteId') != null)
row.style.visibility = 'collapse';
}
};
</script>