悬停显示详细信息

悬停显示详细信息

关注
发信
关注(28)粉丝(399)

MVC网格（VB）：悬停显示详细信息

本文介绍了MVC网格（VB）：悬停显示详细信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我搜索了今天这个网上几个小时，发现一些有用的东西，但我不能得到这个工作，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 @satpalSome 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&amp;Direction=Ascending">Activity No.</a></th><th><a href="/SupportCall/Details/2999?Column=CntctDate&amp;Direction=Ascending">Date</a></th><th>Time</th><th><a href="/SupportCall/Details/2999?Column=ActivityType&amp;Direction=Ascending">Type</a></th><th><a href="/SupportCall/Details/2999?Column=ActivitySubject&amp;Direction=Ascending">Subject</a></th><th><a href="/SupportCall/Details/2999?Column=Priority&amp;Direction=Ascending">Priority</a></th><th>Details</th><th><a href="/SupportCall/Details/2999?Column=UserName&amp;Direction=Ascending">Ochiba Contact</a></th><th><a href="/SupportCall/Details/2999?Column=BPContact&amp;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.

推荐答案

更新

您在这里使用了不正确的标识符

You where using incorrect identifer

$(".ActivityDetails").hide();

$("table.grid tbody tr td:first-child").hover(function () {
      $(".ActivityDetails").hide();
      $("#Activity" + $(this).text()).show()
});

这篇关于MVC网格（VB）：悬停显示详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 05:20
Powered by LMLPHP ©2024 悬停显示详细信息 0.058114