使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

 

后台代码

 

 

       /// <summary>
        /// 数据行绑定事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            try
            {
                if (e.Row.RowType == DataControlRowType.DataRow )
                {
                    GridViewRow row = e.Row;
                    CheckBox ckb = row.Cells[0].FindControl("ckb") as CheckBox;
                    Label ProductID = row.Cells[0].FindControl("lblProductID") as Label;

                    //当鼠标停留时更改背景色
                    row.Attributes.Add("onmouseover", "this.style.backgroundColor='#00A9FF'");
                    //当鼠标移开时还原背景色
                    row.Attributes.Add("onmouseout", "gvProducts_onmouseout('" + gvProducts.ClientID + "','" + ckb.ClientID + "',this) ");
                    //当鼠标移开时还原背景色
                    row.Attributes.Add("onclick", "SelectRadio('" + gvProducts.ClientID + "','" + ckb.ClientID + "','" + ProductID.Text + "',this) ");

                    ckb.Attributes.Add("onclick", "SelectRadio('" + gvProducts.ClientID + "','" + ckb.ClientID + "','" + ProductID.Text + "',document.getElementById('" + row.ClientID + "')) ");

            }
            catch (Exception ex)
            {
            }

        }

 

 

 

 

前台代码

 

 

        /****************************************************/
        //功能：鼠标移出时设置行颜色
        //说明：onmouseout事件时使用  
        //作者：XXXXX
        //日期：2010年5月26日
        /****************************************************/
        function gvUsers_onmouseout(listId, SelectRadioID, row) {
            var SelectRadio = document.getElementById(SelectRadioID);
            //找到控制范围   
            var GridViewtableSearchList = document.getElementById(listId);
            //找到控制范围下所有input   
            var objs = GridViewtableSearchList.getElementsByTagName("input");
            //找到控制范围下所有checkbox并都变为false
            for (var i = 0; i < objs.length; i++) {
                if (objs[i].type.toLowerCase() == "checkbox" && objs[i] == SelectRadio) {
                    if (SelectRadio.checked) {
                        //设置选中行的颜色
                        row.style.backgroundColor = '#33A922'
                    }
                    else {
                        //设置交替行的颜色
                        if (i % 2 == 0) {
                            row.style.backgroundColor = '#FFFFFF'
                        }
                        else {
                            row.style.backgroundColor = '#F4FAFD'
                        }
                    }
                }
            }

        }

        /****************************************************/
        //功能：鼠标单击时使用
        //说明：onmouseout事件时使用  
        //作者：XXXXXX
        //日期：2010年5月26日
        /****************************************************/
        function SelectRadio(listId, SelectRadioID, rv, row) {

            var SelectRadio = document.getElementById(SelectRadioID);

            //找到控制范围   
            var GridViewtableSearchList = document.getElementById(listId);
            //找到控制范围下所有input   
            var objs = GridViewtableSearchList.getElementsByTagName("input");
            //找到控制范围下所有checkbox并都变为false
            for (var i = 0; i < objs.length; i++) {

                //设置除当前选择行外其它行的背景色
                if (objs[i].type.toLowerCase() == "checkbox" && objs[i] != SelectRadio) {
                    objs[i].checked = false;
                    //设置交替行的背景色
                    if (i % 2 == 0) {
                        objs[i].parentElement.parentElement.style.backgroundColor = '#FFFFFF'
                    }
                    else {
                        objs[i].parentElement.parentElement.style.backgroundColor = '#F4FAFD'
                    }
                }
            }
            var SelectRadioSelectRadioID = SelectRadio.id;

            SelectRadio.checked = !SelectRadio.checked
            //设置当前选择行的背景色和返回选择行的主键
            if (SelectRadio.checked) {
                row.style.backgroundColor = '#33A922'
                window.returnValue = rv;
            }
            else {
                
                window.returnValue = ""
            }
        } 

 

 

 

 注:由于火狐不支持parentElement 属性 使用parentNode代替可以兼容火狐