DataList 嵌套GridView实现文章分类列表显示[转]

DataList 嵌套GridView实现文章分类列表显示

昨天晚上花了三个多小时写一个程序实现下面这种功能的：

现在我把我的代码贴上来大家分享一下，这个用到一个DataList，和GridView。先到Dreamwaver里面把布局布好，我用的是 div+css布局的
然后在DataList中嵌套进GridView控件，在把样式做好，然后就开始写代码了
.aspx中代码：

<div id="div_bodyright">
2

<asp:DataList ID="list" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" DataKeyField="TypeID"
4

RepeatLayout="Flow" OnItemDataBound="list_ItemDataBound">
5

<ItemTemplate>
6

<div id="div11" class="bodyleft">
7

<div id="title1" class="cls_title">
8

<div id="tl1" class="cls_tleft"><img src="images/bullet1.gif" alt="Title"/> <label id="t1" class="lbTxt"><%# DataBinder.Eval(Container.DataItem, "TypeName")%></label></div>
9

<div id="tr1" class="cls_tright"><img src="images/more.gif" alt="More

" /></div>
10

</div>
11

<div id="list1" class="divlist">
12

<asp:GridView ID="gvArticle1" runat="server" ShowHeader="false" ShowFooter="false" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" width="100%">
13

<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
14

<Columns>
15

<asp:TemplateField HeaderText="标题">
16

<ItemStyle Width="80%" />
17

<ItemTemplate>
18

<asp:HyperLink ID="title" runat="server" NavigateUrl='<%#"Article.aspx?aid=" + DataBinder.Eval(Container.DataItem,"ArticleId")%>' title='<%#"标题：" + DataBinder.Eval(Container.DataItem, "ArticleTitle") + "\n发布日期：" + DataBinder.Eval(Container.DataItem,"ArticleDateTime") + "\n点击量：" + DataBinder.Eval(Container.DataItem,"ArticleClick")%>'><%# DataBinder.Eval(Container.DataItem, "ArticleTitle")%></asp:HyperLink>
19

</ItemTemplate>
20

</asp:TemplateField>
21

<asp:BoundField DataField="ArticleDate" HeaderText="日期" ItemStyle-Width="20%" />
22

</Columns>
24

<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
25

<EditRowStyle BackColor="#999999" />
26

<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
27

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
28

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
29

<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
30

</asp:GridView>
31

</div>
32

</div>
33

</ItemTemplate>
34

<AlternatingItemTemplate>
35

<div id="div12" class="bodyright">
36

<div id="title2" class="cls_title">
37

<div id="tl2" class="cls_tleft"><img src="images/bullet1.gif" alt="Title"/> <label id="t2" class="lbTxt"><%# DataBinder.Eval(Container.DataItem, "TypeName")%></label></div>
38

<div id="tr2" class="cls_tright"><img src="images/more.gif" alt="More

" /></div>
39

</div>
40

<div id="list1" class="divlist">
41

<asp:GridView ID="gvArticle2" runat="server" ShowHeader="false" AutoGenerateColumns="False" ShowFooter="false" CellPadding="4" ForeColor="#333333" GridLines="None" width="100%">
42

<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
43

<Columns>
44

<asp:TemplateField HeaderText="标题">
45

<ItemStyle Width="80%" />
46

<ItemTemplate>
47

</ItemTemplate>
49

</asp:TemplateField>
50

<asp:BoundField DataField="ArticleDate" HeaderText="日期" ItemStyle-Width="20%" />
51

</Columns>
53

<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
54

<EditRowStyle BackColor="#999999" />
55

<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
56

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
57

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
58

<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
59

</asp:GridView>
60

</div>
61

</div>
62

</AlternatingItemTemplate>
63

</asp:DataList>
64

</div>

.cs中的代码：

BllArticle bll = new BllArticle();

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

list.DataSource = bll.GetTypeList(false);

list.DataBind();

}

protected void list_ItemDataBound(object sender, DataListItemEventArgs e)

{

if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

{

if (e.Item.ItemType == ListItemType.Item)

{

GridView gvList1 = (GridView)e.Item.FindControl("gvArticle1");

gvList1.DataSource = bll.GetArticles(int.Parse(list.DataKeys[e.Item.ItemIndex].ToString()));

gvList1.DataBind();

}

if (e.Item.ItemType == ListItemType.AlternatingItem)

{

GridView gvList2 = (GridView)e.Item.FindControl("gvArticle2");

gvList2.DataSource = bll.GetArticles(int.Parse(list.DataKeys[e.Item.ItemIndex].ToString()));

gvList2.DataBind();

}

在数据层中的代码：

/// <summary>

/// 获取文章类别的信息 IsAll是不是显示全部信息

/// </summary>

/// <param name="IsAll">true 显示所有，false 显示允许显示的内容</param>

/// <returns></returns>

public DataSet GetTypeList(bool IsAll)

{

using (SqlConnection conn = new SqlConnection(DBSqlHelper.DBConnectionString))

{

StringBuilder sb = new StringBuilder();

if(IsAll)

{

sb.Append(" select * from Info_Type order by TypeOrder desc");

return DBSqlHelper.GetDataSet(conn,CommandType.Text,sb.ToString());

}

else

{

sb.Append(" select * from Info_Type where TypeVisible=@Visible order by TypeOrder desc");

SqlParameter parm = new SqlParameter("@Visible",SqlDbType.VarChar,0);

parm.Value = "1";

return DBSqlHelper.GetDataSet(conn, CommandType.Text, sb.ToString(), parm);

}

/// <summary>

/// 获取前N条文章列表数据

/// </summary>

/// <param name="TypeID"></param>

/// <returns></returns>

public DataSet GetArticles(int TypeID)

{

using (SqlConnection conn = new SqlConnection(DBSqlHelper.DBConnectionString))

{

StringBuilder sb = new StringBuilder();

sb.Append(" select top 10 ArticleId,ArticleTitle,replace(convert(varchar(12),ArticleDate,111),'/','-') as ArticleDate,");

sb.Append(" ArticleDate as ArticleDateTime,ArticleClick from Info_Article where ArticleType=@typeid order by ArticleId desc");

SqlParameter parm = new SqlParameter("@typeid", SqlDbType.Int, 0);

parm.Value = TypeID;

return DBSqlHelper.GetDataSet(conn, CommandType.Text, sb.ToString(),parm);

}

这样就可以了，不过我这里就不把CSS文件的代码贴上来了，实现的效果就是上面截图那样的

posted on 2010-06-13 15:26 代码泪阅读(1387) 评论(0) 编辑收藏举报

刷新页面返回顶部

代码泪

DataList 嵌套GridView实现文章分类列表显示[转]

DataList 嵌套GridView实现文章分类列表显示

导航

公告