ASP.NET Gridview:突出显示鼠标上的行,然后更新突出显示的行

时间:2011-07-01 20:33:31

标签: c# javascript asp.net

所以我已经在网上搜索了这个问题的解决方案,到目前为止还没有成功。我试图在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 Classes

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

上面的代码工作正常,问题是我无法对突出显示的行做任何事情,因为Javascript(基于我的理解)修改 tr 标记,而不是实际的GridView类或背景色。我已经到处寻找解决方案,我需要做的就是找到一些我可以从我的C#代码访问的标识符来更新每一行。有人有什么想法吗?

快速修改

我实际上想过使用某种类型的隐藏字段,我根本不知道如何使用JavaScript或者我需要使用Row.Attributes.Add()来保存到隐藏字段。我能看到一些我需要做的例子(JavaScript不是我强大的套件)

2 个答案:

答案 0 :(得分:1)

使用HiddenField存储突出显示的行/记录的ID。调用HighlightRow时,只需将选定的ID添加到HiddenField。回发后,您可以在代码隐藏中读取它的值。或者,您可以在行上使用属性,并为所选的那些存储简单的布尔值。如何解决这个问题有很多选择。

答案 1 :(得分:0)

所以我明白了。它有点乱,但它一直有效,直到我改进我的东西。

首先我将行索引发送到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为真时,moused的每一行都附加了一个字符串。当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
        }
    }
}

我觉得效果很好:)。

感谢Thomas的帮助,让我开始走上正轨!