ASP.NET网格视图:用鼠标高亮显示行，然后更新高亮显示的行

本文关键字：高亮 显示 然后 更新 鼠标 网格 NET 视图 ASP | 更新日期: 2023-09-27 18:00:59

所以我在互联网上搜索了这个问题的解决方案，但到目前为止还没有成功。我正在尝试基于ASP.NET中GridView中的"高亮显示"行更新SQL数据库。以下是我迄今为止高亮显示的代码。

//ASP.NET

// GridView1 Row DataBound event: adds selection functionality
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    e.Row.Attributes.Add("onmousedown", "IsMouseDown(this)");
    e.Row.Attributes.Add("onmouseup", "IsMouseDown(this)");
    e.Row.Attributes.Add("onmouseover", "HighlightRow(this)");
}

//Javascript

<script type="text/javascript">
    var mousedown = false;
    document.onselectstart = new Function ("return false")
    function IsMouseDown(row) {
        if (mousedown == false) mousedown = true;
        else mousedown = false
        if (mousedown == true) {
            HighlightRow(row)
        }
    }
    function HighlightRow(row) {
        if (mousedown == true) {
            if (row.className == 'gridHighlightedRow') {
                row.className = 'gridNormalRow';
            }
            else {
                row.className = 'gridHighlightedRow';
            }
        }
    }
</script>

//CSS类

.gridNormalRow
{
    background-color: #FFFFFF; 
}
.gridHighlightedRow
{
    background-color: #FFFFCC;
}

上面的代码运行得很好，问题是我不能对突出显示的行做任何事情，因为Javascript(根据我的理解(修改了tr标记，而不是实际的GridView类或BackColor。我到处寻找解决方案，我所需要做的就是从C#代码中找到一些可以访问的标识符来更新每一行。有人有什么想法吗？

快速编辑

实际上，我想过使用某种类型的隐藏字段，我只是不知道如何使用JavaScript来实现这一点，也不知道我需要做什么来执行Row.Attributes.Add((，使其保存到隐藏字段中。我能看到一些我需要做什么的例子吗(JavaScript不是我的强套件(

ASP.NET网格视图:用鼠标高亮显示行，然后更新高亮显示的行

使用HiddenField存储高亮显示的行/记录的id。调用HighlightRow时，只需将选定的id添加到HiddenField。回发后，您可以在codebehind中读取其值。或者，您可以在行上使用属性，并为选定的行存储简单的布尔值。如何解决这个问题有很多选择。

所以我想明白了。它有点乱，但它一直有效，直到我完善我所拥有的。

首先，我将行索引发送到javascript

//C#

// GridView1 Row DataBound event: adds selection functionality
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Excludes row header and pager rows
    if (e.Row.RowType != DataControlRowType.Header && e.Row.RowType != DataControlRowType.Pager)
    {
        e.Row.Attributes.Add("onmousedown", "IsMouseDown(this," + e.Row.RowIndex + ")");
        e.Row.Attributes.Add("onmouseup", "IsMouseDown(this," + e.Row.RowIndex + ")");
        e.Row.Attributes.Add("onmouseover", "HighlightRow(this," + e.Row.RowIndex + ")");
    }
}

然后高亮显示，当mousedown为true时，我为鼠标悬停的每一行添加一个字符串。当mouseup事件触发时，我回发了字符串

//Javascript

<script type="text/javascript">
    var mousedown = false;
    var returnGrid = "";
    document.onselectstart = new Function ("return false")
    function IsMouseDown(row, index) {
        if (mousedown == false) mousedown = true;
        else mousedown = false
        if (mousedown == true) {
            HighlightRow(row, index)
        }
        else
        {
            __doPostBack("ReturnedIndexes", returnGrid);
        }
    }
    function HighlightRow(row, index) {
        if (mousedown == true) {
            if (row.className == 'gridHighlightedRow') {
                row.className = 'gridNormalRow';
                returnGrid += (index + ",");
            }
            else {
                row.className = 'gridHighlightedRow';
                returnGrid += (index + ",");
            }
        }
    }
</script>

最后，当页面加载"ReturnIndexes"事件目标时，我根据当前的行颜色设置行颜色

//C#

// Page load event
protected void Page_Load(object sender, EventArgs e)
{
    // Avoids calling this code if the call is a postback
    if (!IsPostBack)
    {
        // Some Code Here
    }
    else if(Request.Params.Get("__EVENTTARGET").ToString() == "ReturnedIndexes")
    {
        // Returns highlighted results
        String ReturnIndexes = Request.Params.Get("__EVENTARGUMENT").ToString();
        txtRowIndexes.Text = ReturnIndexes;
        int[] GridIndex = RowHighlightChanged();
        for (int i = 0; i < GridIndex.Length; i++)
        {
            if (GridView1.Rows[GridIndex[i]].CssClass == "gridHighlightedRow")
            {
                GridView1.Rows[GridIndex[i]].CssClass = "gridNormalRow";
            }
            else GridView1.Rows[GridIndex[i]].CssClass = "gridHighlightedRow";
        }
    }
}

最后，为了更新"高亮显示"的行，我只查找CssClass"gridHighlightedRow"。

//C#

// buttonUpdateSelected Click event: Updates all items currently selected in the grid view
protected void buttonUpdateSelected_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows)
    {
        if (row.CssClass == "gridHighlightedRow")
        {
            // Update Rows
        }
    }
}

我认为效果不错：(。

谢谢你的帮助托马斯，这让我开始走上正轨！

相关文章：