让GridView也支持web标准（div输出）

GridView是一个功能强大的控件, 能够无缝的与objectDataSourc等数据源控件结合起来. 方便进行自定义分页.同时管理数据功能也很强大,拥有众多的事件. 在使用的过程中发现GridView最大的不足就是在数据的展现方面. 不能方便的定制展现的效果. 免费网页模版下载http://www.it55.com

   比如要将10条记录分2行5列进行显示就无能为力了(也许是我不知道). 但通过DataList和Repeater就可以实现这种效果.

http://www.it55.com/

   本文就是介绍如何使GridView具有更灵活的数据展示方式.仿照Repeater的模版列实现.

精美韩国模版下载http://www.it55.com

    目标:使GridView就有灵活的数据展现能力.
如以下的效果:
  

    首先了解下GridView中的展现数据的原理
1.在CreateChildControls((IEnumerable dataSource, bool dataBinding))方法中生成所有的行和列 如数据列, EmptyData列, HeaderRow,FooterRow,PagerRow等 .
2.在Render方法中将绑定好数据的列进行输出 .
GridView是由行(Rows)构成, 然后每行有多列(Cells),每列里面有多个控件. 从控件开始依次输出html. 免费矢量图片素材下载http://www.it55.com

    我们可以发现GridView输出的每一列都是都是有<td></td>包围起来.这样就限制了每一行的数据只能是一条记录中的.没法实现在一行中展现多条记录.

    为什么每一列都是由<td></td>包围? 如果能去掉这个标签就好了. 通过reflector查看源码发现GridView中的列都是继承自TableCell,而TableCell的默认构造函数就是传入 HtmlTextWriterTag.Td, 本来就有带参数的构造函数,可以传入自定义的Tag, 可惜微软把这个设成了internal, 不能进行调用. TableCell在输出html代码时就会在周围加上<td>标签. 看来此路不同,只有另想法子. 免费矢量图片素材下载http://www.it55.com

    Asp.net2.0多了一个特性, 可以通过Controls Adapter进行定制控件的输出样式. 在CodePlex上也有一个开源项目: CSS Friendly Control Adapters 能对控件的输出进行定制. 于是想能不能通过Control Adapters来改变GridView的输出呢,只要把<td>去掉就可以了. 但是还是失望了,他并没有改变TableCell的输出, 还是没一列就围着一个<td></td> . 但是我从CSS Friendly Control Adapters上的到了灵感,将RenderContent方法重写可能会实现想要的效果. 免费网页模版下载http://www.it55.com

    然后我就进行RenderContent的重写, 之中尝试的过程就不多说了. 还是遇到了挺多麻烦 . 只有通过折衷的方式实现了.(如果您知道更好的方式 请指点下) vd;k;l http://www.it55.com rdfg

    最终的GridView实现的效果仿照Repeater控件,Columns中具有唯一的模板列
, 在模板列中可以包含<headerTemplate></headerTemplate>,< itemtemplate></itemtemplate>,<footerTemplate></footerTemplate>. 还能包括EmptyDataTemplate.
示例代码如下:
<cc1:TemplateGridView ID="AjaxGridView1" AutoGenerateColumns="False" runat="server" BorderWidth="0"
                DataSourceID="ObjectDataSource1">
                <Columns>
                    <asp:TemplateField>
                        <headerTemplate>
                            <div> 精美韩国模版下载http://www.it55.com
                        </headerTemplate>
                        <itemtemplate>
                            <div><%#Eval("RowNumber") %></div>
                        </itemtemplate>
                        <footerTemplate>
                            </div> 免费设计素材下载http://www.it55.com
                        </footerTemplate>
                    </asp:TemplateField>
                </Columns>
                <EmptyDataTemplate>
                nodata
                </EmptyDataTemplate>

（编辑：IT资讯之家 www.it55.com）