标题 | GridView控件实现首列固定的方法探究 |
范文 | 张钰鹏 摘要:该文阐述了在ASP.NET的GridView控件中,实现首列固定的方法,所列代码已在Vistual Studio和SQL Server的开发环境中通过验证。 关键词:ASP.NET;GridView控件;首列固定 中图分类号:TP311? ? ? ? 文献标识码:A? ? ? ? 文章编号:1009-3044(2019)02-0210-02 GridView是ASP.NET中的重要数据控件,能够很直观地将数据库中的数据以表格的形式呈现。在Web页面的开发过程中,时常会存在显示的表格列数过多,需要拖动显示的情况,而首列数据往往是最为重要的数据。因此实现GridView控件的首列固定的功能,具有十分重要的意义。 1 GridView控件简介 ASP.NET提供了许多工具用来在网格中显示表格数据,而GridView控件是其中的佼佼者。通过使用GridView控件,可以对多种数据源中的数据进行显示、编辑、删除等操作,还可以通过设置模板来更加灵活地操作数据[1]。GridView控件通常是以二维表格形式显示数据,而在实际应用中,为了使得表格更加美观实用,表格中会出现首列固定的情况,这种情况就需要通过一些代码来实现了。 2 GridView控件的数据操作 GridView控件的列 GridView控件创建列最主要的有两种方式:一是绑定数据源,二是创建模板列。Columns集合用来存储呈现在GridView控件中的所有显式声明的列字段,这些列字段按照它们出现在Columns集合中的顺序显示在GridView控件中[2]。要实现GridView首列固定,可以生成两个GridView,一个显示全部数据,另一个仅显示首列数据,将仅显示首列数据的GridView覆盖在显示全部数据的GridView上,即可实现GridView的首列固定。 GridView控件的数据绑定 在ASP.NET中,GridView数据绑定可以通过直接在前台配置控件以及后台手动绑定来实现[3]。通过前台配置,只需点选GridView控件中的按钮,按提示一步步操作即可,这里便不再赘述;通过后台手动绑定数据,则需要编写一些代码来实现,这种方式较为灵活,更加实用。 3 首列固定功能的实现 假设SQL Server数据库中,数据表的结构如表1所示。 4 显示数据表 4.1 显示效果 程序的运行效果如图1所示,首列固定的设置建立在此效果的基础上。 可以看出,由于屏幕大小的限制,EMail字段数据并不能完全显示出来,因此实现首列固定尤为重要。 4.2 前台页面编程 在aspx页面中添加GridView控件,代码如下:
4.3 后台页面编程 在与前台aspx页面相对应的后台aspx.cs页面中进行编程,首先编写Bind 方法,调用所需显示的数据并且与GridView绑定以显示数据,再在Page_Load事件中调用Bind方法。 ⑴Bind方法 //NewDataSet方法功能: //①str:字符串变量,方法的输入值;②ds:返回一个DataSet,用于存储查询结果。 private DataSet NewDataSet(string str) { string sql = "Data Source=ZHANG-PC;Integrated Security=SSPI;Initial Catalog=Automation;User ID=sa;Password=******"; //定义数据库连接字符串,使用SQL Server身份验证方式,登录名sa。 SqlConnection mycon = new SqlConnection(sql); mycon.Open(); SqlCommand com = new SqlCommand(str, mycon); SqlDataAdapter sda = new SqlDataAdapter(com); DataSet ds = new DataSet(); sda.Fill(ds); mycon.Close();//關闭数据库连接 return ds; } protected void Bind() { string str; str = "select * from [MemberImformation]";//定义数据查询字符串 DataSet ds = NewDataSet(str); //使用NewDataSet方法,输入str字符串,得到返回的查询结果ds。 GridView1.DataSource = ds;//设置GridView控件的数据源为ds GridView1.DataBind();//令GridView控件数据绑定 } ⑵在Page_Load事件中调用Bind方法,代码如下 if (!IsPostBack)//判断是否首次加载页面 { Bind();//调用Bind方法 } 首列固定 4.4 运行效果 程序的运行效果如图2所示。拖动横向滚动条,首列姓名列固定显示,其他列滚动显示。 4.5 前台页面编程 添加GridView控件,用于显示首列数据,代码如下:
在前面添加的GridView控件GridView1,外部包裹了一个div控件,其css样式[4]为:"width:3000px;position:absolute;left:0px;top:0px;z-index:10"。width表示其宽度[5];position表示该控件的定位类型,通常有absolute、fixed、relative、static、inherit五种类型;position:absolute表示生成绝对定位的控件,相对于其上一级父元素(本例中为aspx页面)进行定位,控件的位置通过"left","top","right"以及"bottom"属性进行规定[6];z-index属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,换句话说,值越大其堆叠顺序优先级越高[7]。 而现在添加的显示首列的GridView控件firstGridView,其外部div控件的css样式为:"position:fixed;left:0px;top:0px;z-index:899"。position:fixed表示生成绝对定位的控件,相对于浏览器窗口进行定位,控件的位置通过"left","top","right"以及"bottom"属性进行规定。 |
随便看 |
|
科学优质学术资源、百科知识分享平台,免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。