我想实现这样一个效果:单击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事件根本没执行。请问,这是何原因呢?