定制表格的显示方式

原创 2003年01月08日 10:11:00

在设计一个网站时,我们常需要在一个页面上用表格显示一个数据库中的数据。在传统的ASP中,你必须创建一个HTML表,在一个记录集(recordset)中循环来得到每个记录,并为每个记录创建一个<TR>标签。在每个记录中,你必须循环来得到每个字段并为它创建一个<TD>标签。你不得不手动地处理许多细节,比如创建列标题、设置每个字段的大小以及设置颜色。另外,如果你只想显示记录集的某些字段,你必须用IF语句来查看每个字段,看看你是否想显示它。ASP.NET不仅使所有这些工作变得简单了,而且它也可以让你全面控制表格的显示方式。

首先,将一个DataGrid拖放到一个Web窗体上。然后写一些数据访问代码来从一个数据库得到数据。运用下面的代码我们就可以把名为mdtUsers的DataTable中的数据绑定到dgdUsers这个DataGrid中了:

dgdUsers.DataSource = mdtUsers
dgdUsers.DataBind()

图1.
图1. 运用一个DataGrid来显示数据
我们将DataGrid的DataSource设置成载有数据的DataTable,然后调用DataBind方法来绑定数据。这样ASP.NET就为DataTable中所有的数据自动创建了一个表格。它排列了每一列,并将DataTable中的字段名称显示为列标题。

你也可以修改代码使DataGrid按你需要的方式显示(见图1)。例如,你可以在Web窗体上只显示DataTable的某些字段,或者你可以用一个不同的列标题来代替DataTable运用的字段名。.NET可以让你全面控制DataGrid的显示方式。

选择页面底部的HTML TAB键来显示页面的HTML代码。找到<asp:DataGrid>标签。你需要在<asp:DataGrid>和</asp:DataGrid>标签之间添加一些代码。例如,下面的代码就以交替形式改变了每行的背景颜色:

<AlternatingItemStyle
    BackColor="Coral"></AlternatingItemStyle>

添加下面这行代码可以设置标题的背景颜色:

<HeaderStyle BackColor="Crimson"></HeaderStyle>

现在,假设你不想显示DataTable中的所有的字段。首先,你需要给<asp:DataGrid>标签添加一个AutoGenerateColumns属性,并将它设置成False:

<asp:DataGrid id="dgdUsers" style="Z-INDEX: 101; 
   LEFT: 43px; POSITION: absolute; TOP: 43px" 
   runat="server" AutoGenerateColumns="False">

缺省情况下,AutoGenerateColumns设置成True,这就是告诉.NET,让它自动生成所有的列。如果你想控制生成哪些列,就将这个属性设置成False。然后,你需要添加一个<Columns>代码块,来告诉.NET你想显示哪些列。例如,下面的代码只显示Last Name、First Name和Email地址字段:

<Columns>
<asp:BoundColumn DataField="vcLastName" 
   HeaderText="Last Name"></asp:BoundColumn>
<asp:BoundColumn DataField="vcFirstName" 
   HeaderText="First Name"></asp:BoundColumn>
<asp:BoundColumn DataField="vcEmail" 
   "HeaderText="Email"></asp:BoundColumn>
</Columns>

你对每个想显示的列都用了一个<asp:BoundColumn>标签。DataField属性是DataTable中的字段名,HeaderText这个属性可以让你控制用于该列的标题名。

你的DataGrid的完整的HTML代码应该如下所示:

<asp:DataGrid id="dgdUsers" style="Z-INDEX: 101; 
   LEFT: 43px; POSITION: absolute; TOP: 43px" 
   runat="server" AutoGenerateColumns="False" >
   <AlternatingItemStyle 
      BackColor="Coral"></AlternatingItemStyle>
   <HeaderStyle 
      BackColor="Crimson"></HeaderStyle>
   <Columns>
      <asp:BoundColumn DataField="vcLastName" 
         HeaderText="Last 
         Name"></asp:BoundColumn>
      <asp:BoundColumn DataField="vcFirstName" 
         HeaderText="First 
         Name"></asp:BoundColumn>
      <asp:BoundColumn DataField="vcEmail" 
	  HeaderText="Email"></asp:BoundColumn>
   </Columns>
</asp:DataGrid>

ASP.NET简化了许多普通的网站设计工作。通过运用很少几行的代码你就可以显示整个表的数据,而且它还可以按你想要的方式来显示数据。

[7] Word 定制属于自己的表格样式

自定义表格样式帮助快速统一表格样式。快速增加表格中的行列? 鼠标放在需要插入的地方,会有+出现 快速统一样式? 内置了很多样式,可以选择;可以选择修改表格样式,也可以新建表格样式,对表格的字体...
  • yangfeng2014
  • yangfeng2014
  • 2016年04月17日 08:34
  • 520

js 前端绘制表格,初始化方式的区别。很多种生成图标js:chartjs、echarts两种方式

转自:http://www.cnblogs.com/start-x/p/5617339.html 使用Chartjs 1、这是个人的mark档,逼迫自己以后写这样的博客,所以不是分享 2、c...
  • omayyouhappy
  • omayyouhappy
  • 2017年03月20日 13:49
  • 992

Easyui 表格datagrid 的单元格内容显示方式扩展

有时候使用表格时因为有一个字段内容过多导致的表格被撑大,如下图: 当然easyui datagrid 的nowrap属性默认为true,为true时在一行中显示数据,如下图: ...
  • u012359995
  • u012359995
  • 2015年08月11日 16:34
  • 828

HTML5:定制表单

HTML5中存在多种不同的输入框和按钮,通过设置input元素的type属性来实现,除此之外,HTML5中还支持选择列表、多行输入框等,这些元素都有自己的用途和属性,下面一一介绍。单行文本输入框typ...
  • liuy_98_1001
  • liuy_98_1001
  • 2016年02月16日 14:45
  • 3123

浅谈QTableView和QTableWidget数据表格显示方式

一、浅谈QTableView和QTableWidget数据表格显示方式 ① QTableView是基于MVC架构,QTableView表格用来做显示,QStandardItemModel用来做数据模...
  • mumu0627
  • mumu0627
  • 2016年04月23日 19:23
  • 2429

EasyUi 表格自定义列

以下是我学习EasyUi碰到的问题与解决方案 不说废话了。贴图:     效果图为: 如果要EasyUi的datagrid表格可以自定义列的话。就可以使用他自带的列属性formatter,它是...
  • a316640855
  • a316640855
  • 2017年01月07日 19:51
  • 1023

关于UIImageView显示图片的不同样式

用UIImageView显示图片时,有时图片会被拉伸,这是因为UIImageView继承自UIView,UIView的默认的适配内容的方式是“拉伸填充式”,所以我们看到的图片就被拉伸变形了。如果不想图...
  • dangyalingengjia
  • dangyalingengjia
  • 2016年09月06日 14:45
  • 276

ECharts制作报表模板

最近公司的问题汇总平台差不多接近尾声,回顾前段时间领导任命做的报表真是别有一番成长波折;在这之前以为问题汇总平台就差不多完结了,结果原来压轴的在后面呢,报表的设计涵盖了本平台80%的核心内容,既然这么...
  • u013030601
  • u013030601
  • 2016年10月20日 15:56
  • 6171

想在C#中的listView 控件中显示图片

在ListView控件中,想在ListView 中的第一列显示图片,比如当功能正常时显示对号,否则显示x号,在网上找了半天,都没找到解决办法。最后在 stackoverflow.com 上找到了答案:...
  • bruce135lee
  • bruce135lee
  • 2018年01月19日 11:45
  • 35

idea 包的显示方式

idea 包的显示方式
  • u013803262
  • u013803262
  • 2016年09月10日 21:32
  • 7004
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:定制表格的显示方式
举报原因:
原因补充:

(最多只允许输入30个字)