学习完了用GridView做表格后,我们来学习更难的repeaterrepeater制作出来的表格是不规整的。我这里先给出表格最终的表现形式,下面我们来看前端的table代码:

 

VS(c#)制作table之repeater

 

这一句是给repeater一个ID

<asp:repeater runat="server" id="DatenHouseSubmitDataList"> 

一下代码的本质是HTML中table的代码,有table,tr和td。然后用<HeaderTemplate><ItemTemplate> <FooterTemplate>把这个table分割成了三个部分

 

<HeaderTemplate></HeaderTemplate>包裹的是写死的表头部分,不是相对动态的数据,一般来讲需要左右上下合并的表格单元都在这一部分(比如总面积和住宅套数)

 

<ItemTemplate></ItemTemplate> 这里面的代码乍一看看不到,没事,结合到最终的表格,发现用<%#Eval("xx")%>可以把XX里面的数据循环遍历出来,这里的XX需要和<HeaderTemplate>里写的表头数据一样,这种方式呈现数据是一列一列的显示的,而我们在后台写入数据时确实一行一行写的。

 

<FooterTemplate></FooterTemplate>一般不用,直接包裹</table>就可以了,它定义如何的页脚节 Repeater 显示控件。 默认值为 null(这是微软官方给出的说法)。

 

 

接下来我们看后端代码:

 

VS(c#)制作table之repeater


思路是很清晰的,先添加表头写死的数据(<ItemTemplate>),然后添加行row(<HeaderTemplate>),其中,我们上面讲到是取数据是按照红线箭头顺序取的<%#Eval("xx")%>。


下面我们来仔细说说实际显示的table表头部分怎么做出来的:

这个表头是不规整的,我们看前端页面代码会发现,空格、总面积、住宅、非住宅面积是在一个<tr>里面的,住宅套数和住宅面积是单独的一个<tr>.rowspan="2"表示 同一列上下两个<td>合并成一个;colspan="2"表示 同一行左右两个<td>合并成一个。

我讲这么多,写的也很详细,你快亲自写一写代码吧。

相关文章: