gridview的行选择的一个问题

最新推荐文章于 2016-11-15 16:29:08 发布

weixin_33698823

最新推荐文章于 2016-11-15 16:29:08 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/445545

本文详细探讨了在GridView中实现行内复选框选择与背景色改变的同时，避免复选框点击事件与行点击事件冲突的方法。通过修改事件处理逻辑，确保在复选框点击后正确修改背景色，并且在行点击事件中恢复原始状态。

我想实现这样一个效果：单击gridview的行内任意地方都可以选择该行（就是行内复选框被选中），同时修改该行的背景色。当再次单击行内任意地方又可以取消选择。
另外，当单击选择行内复选框时，我希望可以选择复选框，同时修改行的背景色；单击取消行内复选框时，还原行的背景色，取消复选框的选中状态。
前台大概是这样的

为了实现单击选择或取消选择行，我是在gridview的RowDataBound事件中这么写的：

for (i = 0; i <= GridView1.Rows.Count; i++)
        {
            //首先判断是否是数据行
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //当鼠标点击时更改背景色
                e.Row.Attributes.Add("onclick", "ck=this.getElementsByTagName('input');if(ck[0].type=='checkbox'&&ck[0].checked==false) {this.style.backgroundColor='#00A9FF';ck[0].checked=true;alert('单击行选择该行');}else {this.style.backgroundColor='#ffffff';ck[0].checked=false;alert('单击行不选中该行');}");
            }
        }

上面的alert是测试用的，请自行忽略。
为了实现通过行内的复选框选择和取消选择一行，我在行复选框的onclick里面的js代码如下所示：

function SelectedSingle(cb) {
            var row = cb.parentNode.parentNode;
            if (cb.checked) {
                row.style.backgroundColor = "#66ff33";
            }
            else {
                row.style.backgroundColor = "";
            }
        }

这个地方的alert和颜色是测试用的，视觉效果请暂时不管。

然后问题来了：我单击选择或取消选择行复选框时，似乎选不了行了。经测试发现是单击复选框时先执行了checkbox的onclick事件，然后执行了行的onclick事件。
于是结果是：在checkbox的onclick里面已经实现了需要的效果，然后再行的onclick事件中把实现的效果给抹杀还原了。
于是，我把行的onclick事件取消掉，改为onmousedown事件。结果发现，这个时候需要的效果是出来了，但是似乎复选框的onclick事件根本没执行。请问，这是何原因呢？