DataList嵌套GridView实现文章分类列表显示
昨天晚上花了三个多小时写一个程序实现下面这种功能的:
![](/images/cnblogs_com/chenjilv/QQ.jpg)
现在我把我的代码贴上来大家分享一下,这个用到一个DataList,和GridView。先到Dreamwaver里面把布局布好,我用的是div+css布局的
然后在DataList中嵌套进GridView控件,在把样式做好,然后就开始写代码了
.aspx中代码:
.cs中的代码:
BllArticle bll = new BllArticle();
![](/Images/OutliningIndicators/None.gif)
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");
![](/Images/OutliningIndicators/InBlock.gif)
gvList1.DataSource = bll.GetArticles(int.Parse(list.DataKeys[e.Item.ItemIndex].ToString()));
gvList1.DataBind();
![](/Images/OutliningIndicators/InBlock.gif)
}
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);
}
}
}
![](/Images/OutliningIndicators/None.gif)
/// <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");
![](/Images/OutliningIndicators/InBlock.gif)
SqlParameter parm = new SqlParameter("@typeid", SqlDbType.Int, 0);
parm.Value = TypeID;
![](/Images/OutliningIndicators/InBlock.gif)
return DBSqlHelper.GetDataSet(conn, CommandType.Text, sb.ToString(),parm);
}
}
这样就可以了,不过我这里就不把CSS文件的代码贴上来了,实现的效果就是上面截图那样的
![](/images/cnblogs_com/chenjilv/QQ.jpg)
现在我把我的代码贴上来大家分享一下,这个用到一个DataList,和GridView。先到Dreamwaver里面把布局布好,我用的是div+css布局的
然后在DataList中嵌套进GridView控件,在把样式做好,然后就开始写代码了
.aspx中代码:
1
<div id="div_bodyright">
2![](/Images/OutliningIndicators/None.gif)
3
<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
23
</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
<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>
48
</ItemTemplate>
49
</asp:TemplateField>
50
<asp:BoundField DataField="ArticleDate" HeaderText="日期" ItemStyle-Width="20%" />
51
52
</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>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/dot.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/None.gif)
18
![](/Images/OutliningIndicators/None.gif)
19
![](/Images/OutliningIndicators/None.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/None.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/None.gif)
24
![](/Images/OutliningIndicators/None.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/None.gif)
30
![](/Images/OutliningIndicators/None.gif)
31
![](/Images/OutliningIndicators/None.gif)
32
![](/Images/OutliningIndicators/None.gif)
33
![](/Images/OutliningIndicators/None.gif)
34
![](/Images/OutliningIndicators/None.gif)
35
![](/Images/OutliningIndicators/None.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/None.gif)
38
![](/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/dot.gif)
39
![](/Images/OutliningIndicators/None.gif)
40
![](/Images/OutliningIndicators/None.gif)
41
![](/Images/OutliningIndicators/None.gif)
42
![](/Images/OutliningIndicators/None.gif)
43
![](/Images/OutliningIndicators/None.gif)
44
![](/Images/OutliningIndicators/None.gif)
45
![](/Images/OutliningIndicators/None.gif)
46
![](/Images/OutliningIndicators/None.gif)
47
![](/Images/OutliningIndicators/None.gif)
48
![](/Images/OutliningIndicators/None.gif)
49
![](/Images/OutliningIndicators/None.gif)
50
![](/Images/OutliningIndicators/None.gif)
51
![](/Images/OutliningIndicators/None.gif)
52
![](/Images/OutliningIndicators/None.gif)
53
![](/Images/OutliningIndicators/None.gif)
54
![](/Images/OutliningIndicators/None.gif)
55
![](/Images/OutliningIndicators/None.gif)
56
![](/Images/OutliningIndicators/None.gif)
57
![](/Images/OutliningIndicators/None.gif)
58
![](/Images/OutliningIndicators/None.gif)
59
![](/Images/OutliningIndicators/None.gif)
60
![](/Images/OutliningIndicators/None.gif)
61
![](/Images/OutliningIndicators/None.gif)
62
![](/Images/OutliningIndicators/None.gif)
63
![](/Images/OutliningIndicators/None.gif)
64
![](/Images/OutliningIndicators/None.gif)
.cs中的代码:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
在数据层中的代码:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
这样就可以了,不过我这里就不把CSS文件的代码贴上来了,实现的效果就是上面截图那样的
posted on 2007-09-23 09:58 jerreychen 阅读(3879) 评论(5) 编辑 收藏 举报