Question

在asp.net vs05.i上工作想在gridview上设置鼠标事件

然后根据事件类型，如果事件是鼠标悬停，则在事件为mouseout的情况下缩放其他行，它会在事件发生之前将行的缩放更改回原始值。

if（e.Row.RowType == DataControlRowType.DataRow）

{

    e.Row.Attributes.Add("onmouseover","MouseEvents(this, event)");

    e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)"); 

} 


<script type = "text/javascript">
function MouseEvents(objRef, evt)
{

   if (evt.type == "mouseover")
   {
        objRef.style.height = "100%"; 
        objRef.style.width = "100%";
   }
</script>

以上代码不会以这种方式行事，无论我想要什么。我想放大和缩小？

Answer 1

虽然你最好使用JavaScript库来长期处理这个问题，但我只会解释如何实现你想要的缩放效果以保持简单。

您的标记和.NET代码是正确的。你需要调整你的JavaScript并添加一些CSS来做你想要的。

在最基本的层面上，你想要做的是：

function MouseEvents(objRef, evt) {
    if (evt.type == "mouseover") {
        objRef.style.fontSize= "120%"; 
    } else {
        objRef.style.fontSize= "100%"; 
    }
}

像在问题中一样更改高度和宽度只会更改单元格的尺寸，而不会更改内容。实现缩放效果的最简单方法是增加字体大小。

完成此操作后，您需要考虑如何通过使字体变大来影响表的流动。随着字体变大，高度和高度变大。每个细胞的宽度都会增加。这可能会使布局跳转并变得讨厌处理。

要解决 height 转换问题，请更改表格单元格中的line-height。这将确保当您将鼠标悬停在行上时，行不会向上或向下移动。
要处理 width 转换，您的单元格的width（或更好，表格本身）应设置得足够大，以使表格本身不会增长为该行需要更多空间来容纳更大的文本。

这就是解决这些问题的方法：

tr {line-height: 25px}
/* change the "200px" to be whatever your table needs */
table { 200px }

为了更进一步，我们可以提高JavaScript的灵活性......

在JavaScript中包含演示文稿详细信息是一种不好的做法。想想如果您将来需要改变悬停行的外观会发生什么。如果发生这种情况，您将不得不修改代码逻辑，随着您的应用程序的增长，这可能很烦人。演示规则应该在一个地方，一个中央样式表。

最好让JavaScript换掉CSS类。然后，您可以将“悬停”样式规则放在CSS文件中。为此，您可以将JavaScript更改为以下内容：

function MouseEvents(objRef, evt) {
    if (evt.type == "mouseover") {
        objRef.className = "hover";
    } else {
        objRef.className = "";
    }
}

完成此操作后，现在可以将“缩放”样式移动到CSS中，如下所示：

.hover{font-size: 120%}

JavaScript只是添加或删除了这个CSS类。没有这个类的任何东西都将具有默认的100％字体大小，然后当添加该类时，它将变得更大。在CSS中保存内容还允许您添加其他内容，例如更改行的背景颜色，字体粗细，文本颜色等，因此最好这样做。

可在此处找到此答案中代码的实时演示：http://jsbin.com/ideve

正如我在帖子开头提到的那样，您最好使用jQuery，Dojo，YUI，MooTools或{等JavaScript框架{3}}。这将允许您将JavaScript代码与标记（以及ASP.NET代码逻辑）完全分开，从而使其更易于使用。它还允许您避免JavaScript事件中跨浏览器怪癖的危险，我假设这是为什么您首先使用HTML属性来触发JavaScript事件，因为它比完全从头开始更容易没有框架的JavaScript。

如何在缩放中显示gridview行

1 个答案: