MVC网格（VB）：悬停显示详细信息 [英] MVC Grid (VB): Show details on hover
问题描述
我搜索了今天这个网上几个小时，发现一些有用的东西，但我不能得到这个工作，100％，因为我想。如果有人能够帮助这将是太棒了！
在下面我的code，我已经删除任何可能泄露数据而我工作的企业可能不希望共享，他们将同表示＆LT; SOMETHING>
这里是我的问题：
我填充一个MVC电网
I've searched for this online for several hours today and found some useful stuff, but I can't get this to work 100% as I'd like. If anyone can help that would be fantastic! In my code below, I've removed anything which could expose data which the business I work for may not want to share, they will be indicated with "< SOMETHING>" Here's my problem: I'm populating an MVC grid
@Html.Grid(Model.Activities).WithModel(New <CLASSNAME HERE>(Html)).Sort(ViewData.Item("actgridsort"))
这部分的伟大工程，网格是显示一个支持团队在支撑问题所采取的活动，我可以钻入每个活动使用网格内的详细信息链接，每一个活动里面有一个注意事项一节。
我想，让用户只需将鼠标悬停在其涉及到的特定活动网格上的细胞，看到该活动的注意事项。
例如：
活动101可包含注释的Hello world
活动102可能含有再见世界
this part works great, the grid is to show activities taken on a support issue by a support team, and I can "drill into" each activity using a "details" link inside the grid, inside each activity there is a "Notes" section. I am trying to allow the users to see the notes from the activity simply by hovering over the cells on the grid which relate to that particular activity. For example: Activity 101 may contain the note "Hello world" Activity 102 may contain "Goodbye World"
目前，如果我将鼠标悬停在活动101，我的code显示：
At the moment, if I hover over activity 101, my code displays:
hello world
goodbye world
不过，如果我将鼠标悬停在102，它会显示什么。
我想让它显示的Hello world，当鼠标悬停在101，和再见世界超过102等
However, if I hover over 102, it displays nothing. I want it to show "Hello world" when hover over 101, and "goodbye world" over 102 etc
这是我的code到目前为止：
--view ---
here is my code so far: --VIEW---
@code
For Each Activity In Model.Activities
@<div id ='@string.Format("Activity{0}", Activity.ClgCode)' class = "ActivityDetails">
<br />
Activity @Activity.ClgCode:
<b>
@Activity.Notes
</b>
</div>
Next
End Code
- JS -
--JS--
<script>
$(".ActivityDetails").hide();
$("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });
</script>
下面是在控制台脚本输出由@satpal的要求
里面的一些在这里已经被我的隐私原因删除评论。
Here is the script output in the console as requested by @satpal Some of the comments inside here have been removed by me for privacy reasons.
<div class="display-label" >Details:</div>
<div class="display-field display-field-bordered">
<pre>
<span style="white-space: pre-line">
PROBLEM WRITTEN HERE
</span>
</pre>
</div>
</div>
<p>
<table class="grid"><thead><tr><th><a href="/SupportCall/Details/2999?Column=ClgCode&Direction=Ascending">Activity No.</a></th><th><a href="/SupportCall/Details/2999?Column=CntctDate&Direction=Ascending">Date</a></th><th>Time</th><th><a href="/SupportCall/Details/2999?Column=ActivityType&Direction=Ascending">Type</a></th><th><a href="/SupportCall/Details/2999?Column=ActivitySubject&Direction=Ascending">Subject</a></th><th><a href="/SupportCall/Details/2999?Column=Priority&Direction=Ascending">Priority</a></th><th>Details</th><th><a href="/SupportCall/Details/2999?Column=UserName&Direction=Ascending">Ochiba Contact</a></th><th><a href="/SupportCall/Details/2999?Column=BPContact&Direction=Ascending">Customer Contact</a></th><th class="sort_asc"><a href="/SupportCall/Details/2999?Direction=Descending"></a></th></tr></thead><tbody><tr class="gridrow"><td>6625</td><td>06/01/2014</td><td>12:24</td><td>Support</td><td>Website</td><td>0</td><td>Request for Further info from client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6625">Details</a></td></tr><tr class="gridrow_alternate"><td>6627</td><td>06/01/2014</td><td>12:32</td><td>Support</td><td>Website</td><td>1</td><td></td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6627">Details</a></td></tr><tr class="gridrow"><td>6628</td><td>06/01/2014</td><td>12:34</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6628">Details</a></td></tr><tr class="gridrow_alternate"><td>6630</td><td>06/01/2014</td><td>12:43</td><td>Support</td><td>Website</td><td>0</td><td>Request for further information</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6630">Details</a></td></tr><tr class="gridrow"><td>6631</td><td>06/01/2014</td><td>13:07</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>Sue Simpson</td><td>Adrian Owen</td><td><a href="/Activity/Details/6631">Details</a></td></tr><tr class="gridrow_alternate"><td>6632</td><td>06/01/2014</td><td>13:25</td><td>Support</td><td>Website</td><td>0</td><td>Update to client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6632">Details</a></td></tr><tr class="gridrow"><td>6635</td><td>06/01/2014</td><td>15:57</td><td>Support</td><td>Website</td><td>0</td><td>Update to client after investigation and referral to 3rd Par</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6635">Details</a></td></tr><tr class="gridrow_alternate"><td>6639</td><td>07/01/2014</td><td>09:01</td><td>Support</td><td>Website</td><td>0</td><td>Response to client after update from 3rd Party</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6639">Details</a></td></tr></tbody></table>
<div id ='Activity6625' class = "ActivityDetails">
<br />
Activity 6625:
<b>
NOTES HERE
</b>
</div>
<div id ='Activity6627' class = "ActivityDetails">
<br />
Activity 6627:
<b>
NOTES HERE
</b>
</div>
<div id ='Activity6628' class = "ActivityDetails">
<br />
Activity 6628:
<b>
NOTES HERE
</b>
</div>
<div id ='Activity6630' class = "ActivityDetails">
<br />
Activity 6630:
<b>
NOTES HERE
</b>
</div>
<div id ='Activity6631' class = "ActivityDetails">
<br />
Activity 6631:
<b>
NOTES HERE
</b>
</div>
<div id ='Activity6632' class = "ActivityDetails">
<br />
Activity 6632:
<b>
NOTES HERE
</b>
</div>
<div id ='Activity6635' class = "ActivityDetails">
<br />
Activity 6635:
<b>
NOTES HERE
</b>
</div>
<div id ='Activity6639' class = "ActivityDetails">
<br />
Activity 6639:
<b>
NOTES HERE
</b>
</div>
</p>
<script>
$(".ActivityDetails").hide();
// $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });
// $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });
$("table.grid tbody tr td:first-child").hover(function () {
$(".ActivityDetails" + $(this).text()).show()
}, function () {
$(".ActivityDetails" + $(this).text()).hide()
});
// $("table.grid tbody tr td:first").hover(function () {
// var selectValue = $(this).siblings("td:first").html();
// $(".ActivityDetails" + $(selectValue, this).text()).toggle() });
</script>
提前的人非常感谢谁，甚至花时间阅读。
Many thanks in advance for anyone who even took the time to read this.
推荐答案
与尝试
Try with
$("table.grid tbody tr td:first-child").hover(function () {
$(".ActivityDetails" + $(this).text()).toggle()
});
或
$("table.grid tbody tr td:first-child").hover(function () {
$(".ActivityDetails" + $(this).text()).show()
},function () {
$(".ActivityDetails" + $(this).text()).hide()
});
更新
您在这里使用了不正确的标识符
You where using incorrect identifer
$(".ActivityDetails").hide();
$("table.grid tbody tr td:first-child").hover(function () {
$(".ActivityDetails").hide();
$("#Activity" + $(this).text()).show()
});
这篇关于MVC网格（VB）：悬停显示详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
