码迷,mamicode.com
首页 > Web开发 > 详细

JS控制GridView行选择

时间:2018-10-07 17:59:19      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:没有   indicator   选择   选中行   地址   ini   view   oid   ++   

ASP.NET里的GridView控件使用非常广泛,虽然其功能强大,但总有一些不尽如人意的地方。
比如在选择行的时候,它就没有UltraWebGrid做的友好;UltraWebGrid允许用户设置是否显示选择框,设置允许,则会在最左边多出一列,表示选择的行。而GridView则没有这个功能。但没有,不代表不能实现,下面我就通过JS来实现行选择的标识。

后台代码:

 

技术分享图片protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
技术分享图片技术分享图片...{
技术分享图片    int id = Convert.ToInt32(InstallandMaintanceGrid.DataKeys[e.Row.RowIndex].Value.ToString());
技术分享图片    e.Row.Attributes.Add("ondblclick", "javascript:dbClick(" + id + ")");
技术分享图片    e.Row.Attributes.Add("id", _i.ToString());
技术分享图片    e.Row.Attributes.Add("onKeyDown", "SelectRow();");
技术分享图片    e.Row.Attributes.Add("onClick", "MarkRow(" + _i.ToString()+","+id + ");");
技术分享图片    _i++;
技术分享图片}
技术分享图片
技术分享图片

 

前台代码:

技术分享图片 <script type="text/javascript">
技术分享图片技术分享图片            function dbClick(keys)...{
技术分享图片                //双击,获取该行ID
技术分享图片                document.getElementById("ctl00_hd_selectedid").value = keys;
技术分享图片            }
技术分享图片            var currentRowId = 0;    
技术分享图片            function SelectRow()//选择行
技术分享图片技术分享图片            ...{
技术分享图片                if (event.keyCode == 40)
技术分享图片                    MarkRow(currentRowId+1);
技术分享图片                else if (event.keyCode == 38)
技术分享图片                    MarkRow(currentRowId-1);
技术分享图片            }        
技术分享图片
技术分享图片            function MarkRow(rowId,keys)//选中行变色
技术分享图片技术分享图片            ...{
技术分享图片                if (document.getElementById(rowId) == null)
技术分享图片                    return;            
技术分享图片                if (document.getElementById(currentRowId) != null )
技术分享图片技术分享图片                ...{
技术分享图片                    document.getElementById(currentRowId).style.backgroundColor =‘#ffffff‘;
技术分享图片                }
技术分享图片
技术分享图片                currentRowId = rowId;
技术分享图片                document.getElementById(rowId).style.backgroundColor = ‘#ff0000‘;
技术分享图片                document.getElementById("ctl00_hd_selectedid").value = keys;
技术分享图片            }
技术分享图片        </script>

--------------------- 本文来自 zsj830120 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/zsj830120/article/details/2408422?utm_source=copy 

JS控制GridView行选择

标签:没有   indicator   选择   选中行   地址   ini   view   oid   ++   

原文地址:https://www.cnblogs.com/asdyzh/p/9750660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!