ASP.NET的GridView：过然后更新突出显示的行高亮显示鼠标行 [英] ASP.NET Gridview: Highlighting rows on mouse over then updating the highlighted rows

问题描述

所以，我已经走遍了解决这一问题的互联网，并没有成功为止。我想基于在ASP.NET的GridView突出了行更新SQL数据库。这里是code我迄今为突出。

So I have scoured the internet for a solution to this problem, and haven't been to successful so far. I am trying to update a SQL database based on "highlighted" rows in a GridView in ASP.NET. Here is the code I have so far for highlighting.

// ASP.NET

// 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

// 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类

// CSS Classes

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

以上code为正常使用，问题是，由于使用Javascript（根据我的理解），我不能这样做与突出显示的行任何modiefies的的 TR 的标签，而不是实际GridView控件类或背景色。我到处都找过一个解决方案的地方，我需要做的就是找​​到一些标识符我可以从我的C＃code使用更新的每一行。任何人有什么想法？

The above code is working perfectly, the problem is that I can't do anything with the highlighted rows because Javascript (based on my understanding) modiefies the tr tag, not the actual GridView class or BackColor. I have looked all over the place for a solution, all I need to do is find some identifier I can access from my C# code to update each row. Anyone have any ideas?

快速编辑

其实，我想用某种类型的隐藏字段的，我只是不知道怎么做，JavaScript或什么，我需要做的的Row.Attributes.Add（），使其保存到一个隐藏字段。我可以看到什么，我需要做的一些例子（JavaScript是不是我的套房）

I actually thought of using some type of hidden field, I just have no idea how to do that with JavaScript or what I would need to do the the Row.Attributes.Add() to make it save to a hidden field. Can I see some examples of what I would need to do (JavaScript is not my strong suite)

推荐答案

所以我想通了。这是一个有点混乱，但它的工作，直到我改进我有什么。

So I figured it out. It is a little messy but it works till I refine what I have.

首先，我送行索引的JavaScript

First I sent the Row Index to 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 + ")");
    }
}

然后做了高亮和每一行滑鼠移到与鼠标按下的时候是真实的我追加的字符串。当鼠标松开事件触发我做的字符串的回发

Then did the highlighting and for each row moused over with when mousedown was true I appended a string. When the mouseup event fires I did a postback of the string

//使用Javascript

// 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事件目标我设置行的颜色基于什么行的颜色目前。

Finally, when the page loads with the "ReturnIndexes" event target I set the row color based on what the row color currently is.

// 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";
        }
    }
}

最后更新突出了行我只认准的CssClassgridHighlightedRow。

Finally to update the "highlighted" rows I just look for the 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
        }
    }
}

作品pretty好，我想：）

Works pretty well I think :).

感谢您的帮助托马斯，这让我开始步入正轨！

Thanks for the help Thomas, it got me started on the right track!

这篇关于ASP.NET的GridView：过然后更新突出显示的行高亮显示鼠标行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！