首页 > 代码库 > asp.net GridView 表格之选中行

asp.net GridView 表格之选中行

2024-11-04 09:52:39   209人阅读

技术分享一、GridView 表格之选中行

asp.net选中行的功能最初以为只能通过属性中AllowGenerateSelectButton(运行时是否自动生成选择按钮)来实现，需要点击生成的选择按钮来操作，但这样使用并是很方便。

技术分享

经寻找找到了改进办法如下效果

技术分享

鼠标经过时背景色会改变，选中后可获取响应行的数据

实现方法如下：

技术分享

首先前台设计属性框中事件绑定RowDataBound（在对时局进行了绑定后激发）事件

后台代码如下：

   /// <summary>
        /// 在对数据进行了绑定后激发
        /// 主要实现鼠标点击时选中该行
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            #region 方法0 存在bug 暂未改进 供参考
            //e.Row.Attributes["style"] = "cursor:hand";
            //PostBackOptions myPostBackOptions = new PostBackOptions(this);
            //myPostBackOptions.AutoPostBack = false;
            //myPostBackOptions.PerformValidation = false;
            //myPostBackOptions.RequiresJavaScriptProtocol = true; //加入javascript:头
            //String evt = Page.ClientScript.GetPostBackClientHyperlink(sender as GridView, "Select$" + e.Row.RowIndex.ToString());
            //e.Row.Attributes.Add("onclick", evt);
            #endregion

            #region 方法1
            //if (e.Row.RowType == DataControlRowType.DataRow)
            //{
            //    e.Row.Attributes.Add("onClick", "__doPostBack(‘" + GridView1.UniqueID + "‘,‘Select$" + e.Row.RowIndex + "‘);");//此处为两个“_”
            //}
            #endregion

            #region 方法2
            int i;
            for (i = 0; i <= GridView1.Rows.Count; i++)
            {
                //首先判断是否是数据行
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    //当鼠标停留时更改背景色
                    e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor=‘#00A9FF‘");
                    //当鼠标移开时还原背景色
                    e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
                    //单击行的任意列会自动选中此行
                    e.Row.Attributes.Add("onclick", "__doPostBack(‘GridView1‘,‘Select$" + e.Row.RowIndex + "‘)");
                }
            }
            #endregion

 二、获取选中行数据

选中某行后获取数据

技术分享技术分享

在属性框中事件选项中选择设置SelectedIndexChanged（ 在GridView中选择行时，在该行选择完成后激发）事件选项

后台代码如下

        /// <summary>
        /// 选择某行时在最左侧更新显示数据详细
        /// 在DataGriew选择行时，在该选择操作完成后激发
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (GridView1.SelectedIndex >= 0)
            {
                ClearTreeNodeChecked(TreeView1.Nodes);
                txtName.Text = GridView1.SelectedRow.Cells[0].Text;
                txtPhone.Text = GridView1.SelectedRow.Cells[1].Text;
                txtSendTime.Text = GridView1.SelectedRow.Cells[2].Text;
                GetUserNodes();
            }
        }

 

asp.net GridView 表格之选中行


联系
我们