【发布时间】:2015-01-19 21:30:23
【问题描述】:
默认的分页器机制在最后一行插入一个表格,然后这个表格包含一行,其中包含所需数量的包含页码的单元格(我将页面模式设置为数字)。我想创建一个分页模板,而不是这个嵌套表,它由浮动到彼此左侧的小方形 div 组成,每个框内都有页码。
如何创建这样的寻呼机模板?
谢谢
【问题讨论】:
标签: asp.net
默认的分页器机制在最后一行插入一个表格,然后这个表格包含一行,其中包含所需数量的包含页码的单元格(我将页面模式设置为数字)。我想创建一个分页模板,而不是这个嵌套表,它由浮动到彼此左侧的小方形 div 组成,每个框内都有页码。
如何创建这样的寻呼机模板?
谢谢
【问题讨论】:
标签: asp.net
在 PagerTemplate 中放置一个 Repeater 控件,如下所示:
<PagerTemplate>
<asp:Repeater ID="repFooter" OnItemCommand="repFooter_ItemCommand" runat="server">
<HeaderTemplate>
<div class="pager">
</HeaderTemplate>
<ItemTemplate>
<div class="page">
<asp:LinkButton ID="lnkPage" Text='<%# Container.DataItem %>' CommandName="ChangePage" CommandArgument="<%# Container.DataItem %>" runat="server" />
</div>
</ItemTemplate>
<FooterTemplate>
<div class="clear"></div>
</div>
</FooterTemplate>
</asp:Repeater>
</PagerTemplate>
然后为 Grid 的 DataBound 事件添加一个事件处理程序,该事件处理程序为转发器设置数据源,如下所示:
protected void GridView1_DataBound(object sender, EventArgs e)
{
GridViewRow pagerRow = GridView1.BottomPagerRow;
if (pagerRow != null)
{
Repeater repFooter = (Repeater)pagerRow.Cells[0].FindControl("repFooter");
List<int> pages = new List<int>();
for (int i = 0; i < GridView1.PageCount; i++)
{
pages.Add(i + 1);
}
repFooter.DataSource = pages;
repFooter.DataBind();
}
}
添加一个事件处理器来处理转发器的ItemCommand事件,如下:
protected void repFooter_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "ChangePage")
{
GridView1.PageIndex = Convert.ToInt32(e.CommandArgument) - 1;
}
}
这是 MSDN 上的另一个示例,它用下拉列表替换了默认寻呼机: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx
【讨论】:
这是另一种使用 gridview 的内置分页命令的方法。这还将在网格的当前页面上呈现标签而不是链接按钮。
创建一个继承自 ITemplate 的类,如下所示:
public class PagerTemplate: ITemplate
{
private const string PAGE_COMMAND_NAME = "Page";
public GridView AssociatedGridView { get; private set; }
public PagerTemplate(GridView associatedGridView)
{
this.AssociatedGridView = associatedGridView;
}
public void InstantiateIn(Control container)
{
for (int i = 0; i < this.AssociatedGridView.PageCount; i++)
{
Panel pnlBox = new Panel();
if (this.AssociatedGridView.PageIndex != i)
{
LinkButton lnkPage = new LinkButton();
lnkPage.Text = (i + 1).ToString();
lnkPage.CommandName = PAGE_COMMAND_NAME;
lnkPage.CommandArgument = (i + 1).ToString();
pnlBox.Controls.Add(lnkPage);
}
else
{
Label lblPage = new Label();
lblPage.Text = (i + 1).ToString();
pnlBox.Controls.Add(lblPage);
}
container.Controls.Add(pnlBox);
}
}
}
然后在页面 Init 事件中执行以下操作:
protected void Page_Init(object sender, EventArgs e)
{
GridView1.PagerTemplate = new PagerTemplate(GridView1);
}
使用这种方法,您还可以通过将它们的 CommandName 设置为“Prev”、“Next”、“First”和“Last”来添加上一页、下一页、首页和最后一页按钮。
【讨论】:
另一种方法是设置分页表本身的样式。
向分页器添加一个 CSS 类,如下所示:
<asp:GridView ... >
<PagerStyle CssClass="pager" />
</asp:GridView>
这将向分页表行添加一个类。
现在设置CSS样式选择包含页码的TD如下:
tr.pager td table td
{
margin: 2px;
width: 10px;
padding: 0px 3px 0px 3px;
background-color: #FBFBFB;
text-align: center;
border: solid 1px #CACACA;
}
【讨论】:
我会使用中继器并对其进行精细控制。每个人都达到了一个曲线在便利性和精细控制之间翻转的点,看起来你已经达到了。
如果您真的想模仿寻呼机,可以将转发器包装在您自己的用户控件中,然后引发相同的事件。
【讨论】:
对 marzouka 的回答的简短补充:
使用这种方法,您还可以通过将它们的 CommandName 设置为“Prev”、“Next”、“First”和“Last”来添加上一页、下一页、首页和最后一页按钮。
要实现上一页、下一页、首页和最后一页按钮,您必须更改 CommandArgument...CommandName 仍必须为“Page”
例如
LinkButton firstButton = new LinkButton();
firstButton.CommandName = "Page";
firstButton.CommandArgument = "First";
firstButton.Text = "First";
container.Controls.Add(firstButton);
【讨论】: