использование mouseover / mouseout в gridview с чередующимися строками - PullRequest
Новая
       21

использование mouseover / mouseout в gridview с чередующимися строками

1 голос
/ 31 марта 2009

В настоящее время у меня есть вид сетки с чередующимися цветами, серебристым и белым, с синим заголовком (очевидно, не выбирается). Первоначально у меня была эта штуковина onmouseover / onmouseout, но почему-то вчера утром она не работала, и весь вчерашний день я боролся, пытаясь найти ответы и не дотягивая. Вот функция привязки данных: 

protected void GridView_OnRowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + j.ToString() + "')");
            e.Row.Attributes.Add("onmouseover", "HighlightOn(this)");
            e.Row.Attributes.Add("onmouseout", "HighlightOff(this)"); 
        }
    }

А вот функции onmouseover и onmouse out: 

function HighlightOn(rowid)
{   
    if (document.getElementById(gridViewCtlId).disabled == false)
    {
        if ($(selectedIndex).val() != rowid.rowIndex)
        {
            rowid.style.backgroundColor = '#8FBAEF';
        }
    }
}

function HighlightOff(rowid)
{
    if (document.getElementById(gridViewCtlId).disabled == false)
    {   
        if ($(selectedIndex).val() != rowid.rowIndex)
        {
            var modIdx = rowid.rowIndex % 2;
            if (modIdx == 0)
            {
                rowid.style.backgroundColor = 'Silver';
            }
            else
            {
                rowid.style.backgroundColor = 'White';
            }
        }
    }
}

selectedIndex устанавливается следующим образом: 

function getSelectedRow(rowIdx)
{
    getGridViewControl(rowIdx);
    if (gridViewCtl != null)
    {
        $(selectedIndex).val(rowIdx);
        return gridViewCtl.rows[rowIdx];
    }
    return null;
}

Эта функция просто получает строку, присваивая ей идентификатор строки в виде сетки (используется для события onclick для изменения цвета строки).

Проблема в следующем: когда я нажимаю на строку, она подсвечивается. Когда я затем перемещаю мышь, другие строки становятся несколько подсвеченными, что правильно, но когда я щелкаю по другой строке и перемещаю мышь из этой строки, она становится подсвеченной. И когда я нажимаю на него снова, он остается выделенным. selectedIndex - это просто скрытое поле на странице. Кто-нибудь видит, почему это не работает должным образом? Спасибо.

1 Ответ

3 голосов
/ 21 апреля 2009

Прежде всего вы можете решить эту проблему с помощью некоторого CSS (не поддерживается в IE6): 


tbody tr:hover td {
  background-color: orange;
}

Если бы я использовал JavaScript, я бы использовал ненавязчивую технику . Тогда вы можете пропустить C #. Вот как вы можете это сделать: 


$(function () {
  $("tbody tr")
    .mouseenter(function () {
      $(this).addClass("Highlight");
    })
    .mouseleave(function () {
      $(this).removeClass("Highlight");
    });
});

Вам нужен CSS для этого: 


tbody tr.Highlight td {
 background-color: orange;
}
...