gridview的行选择的一个问题

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

 

相关文章
|
6月前
|
前端开发 API Android开发
26. 【Android教程】网格视图 GridView
26. 【Android教程】网格视图 GridView
96 2
|
Android开发
ScrollView 与 ListView 以及 GridView 滑动冲突完美解决
ScrollView 与 ListView 以及 GridView 滑动冲突完美解决
|
Java API Android开发
ListView简单实用
自定义BaseAdapter,绑定ListView的最简单例子
156 0
Flutte 之 ListView
Flutte 之 ListView
84 0
Flutte 之 ListView
|
Web App开发 SQL 前端开发
|
Web App开发 前端开发 JavaScript
|
Android开发 数据格式 XML
浅谈RecyclerView(完美替代ListView,GridView)
Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用。 个人体验来说,RecyclerView绝对是一款功能强大的控件。 首先总结下RecyclerView的特点: 1.
1279 0
|
Android开发 数据格式 XML
ListView的使用
ListView样式设置 取消Item点击变色效果 android:listSelector=”@android:color/transparent” Item条目高度的设定 ...
807 0
解决ListView嵌套ListView遇到的问题
Listview嵌套会造成的问题主要是子listview的高度错误导致内容不能正常显示完,解决这个问题,我个人第一个想法就是重新计算子listview的高度,代码如下: private void setListViewHeightBasedOnChildren(ListView listView) { if(listView == null) return; Li
1223 0