【问题标题】:custom pagertemplate自定义分页模板
【发布时间】:2015-01-19 21:30:23
【问题描述】:

默认的分页器机制在最后一行插入一个表格,然后这个表格包含一行,其中包含所需数量的包含页码的单元格(我将页面模式设置为数字)。我想创建一个分页模板,而不是这个嵌套表,它由浮动到彼此左侧的小方形 div 组成,每个框内都有页码。

如何创建这样的寻呼机模板?

谢谢

【问题讨论】:

    标签: asp.net


    【解决方案1】:

    在 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处理页面的变化?
    • 在中继器控件的 ItemCommand 事件处理程序中。就像我上面答案中的最后一个代码块一样。
    • 我刚刚发布了另一个答案,这可能是比当前更好的方法。希望对您有所帮助。
    • 使用 GridView1_PreRender 代替 DataBound 怎么样。
    【解决方案2】:

    这是另一种使用 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”来添加上一页、下一页、首页和最后一页按钮。

    【讨论】:

      【解决方案3】:

      另一种方法是设置分页表本身的样式。

      向分页器添加一个 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;
      }
      

      【讨论】:

        【解决方案4】:

        我会使用中继器并对其进行精细控制。每个人都达到了一个曲线在便利性和精细控制之间翻转的点,看起来你已经达到了。

        如果您真的想模仿寻呼机,可以将转发器包装在您自己的用户控件中,然后引发相同的事件。

        【讨论】:

        • 我正在使用 gridview 来处理排序。寻呼机是如何在 stackoverflow 上完成的,digg.... 带有页码的框列表?我可以做到这一切,但我一直坚持如何放置 url,以便正确触发更改页面事件。
        【解决方案5】:

        对 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);
        

        【讨论】:

          猜你喜欢
          • 2016-03-10
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-10-14
          • 2016-05-31
          • 1970-01-01
          • 1970-01-01
          • 2011-11-18
          相关资源
          最近更新 更多