总计 149 次浏览

目录

一、启用分页

二、修改GridView分页模板

1.进入控件模板修改视图:

2.进入页码模板(PagerTemplate)视图

3.添加导航按钮控件

4.修改导航控件属性

三、输入页号跳转

1.进入页码模板视图

2.添加文本框及按钮控件

3.编写代码


接上文

经过美化,GridView的外观已经不错了,只是分页方面还过于简单。本期重点解决分页相关的内容,计划实现:导航链接翻页与输入页号跳转。

一、启用分页

打开GridView编辑菜单,确保“启动分页”是选中状态

【GridView渐进全解】第四部分GridView分页进阶插图

或者在控件属性窗口中,AllowPaging的属性为True

【GridView渐进全解】第四部分GridView分页进阶插图1

二、修改GridView分页模板

1.进入控件模板修改视图:

控件编辑菜单→编辑模板

【GridView渐进全解】第四部分GridView分页进阶插图2

2.进入页码模板(PagerTemplate)视图

【GridView渐进全解】第四部分GridView分页进阶插图3

3.添加导航按钮控件

工具箱→标准→LinkButton→拖入PagerTemplate视图

【GridView渐进全解】第四部分GridView分页进阶插图4

4.修改导航控件属性

【GridView渐进全解】第四部分GridView分页进阶插图5

四个按钮均需如此设置:

Text

首页

上页

下页

末页

ID

lbtnFirst

lbtnPrev

lbtnNext

lbtnLast

CausesValidation

False

False

False

False

CommandArgument

First

Prev

Next

Last

CommandName

Page

Page

Page

Page

ToolTip

跳转至第一页

跳转至上一页

跳转至下一页

跳转至最后一页

最终产生的源代码如下:

【GridView渐进全解】第四部分GridView分页进阶插图6

页面效果:

【GridView渐进全解】第四部分GridView分页进阶插图7

测试导航跳转正常

三、输入页号跳转

1.进入页码模板视图

【GridView渐进全解】第四部分GridView分页进阶插图8

2.添加文本框及按钮控件

【GridView渐进全解】第四部分GridView分页进阶插图9

控件属性:

控件

id

width

text

CssClass

CommandName

文本框

txtNewPageIndex

32px

<%# GridView1.PageIndex+1 %>

form-text text-center align-middle m-0 ml-4

按钮

btnGo

48px

Go

btn btn-primary btn-sm m-1

Go

CssClass请参考Bootstrap文档

文本框的text值,绑定自GridView控件的当前页码;按钮发出一个“Go”的命令

3.编写代码

双击按钮,给按钮添加单击事件,代码如下:

	
  1. protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
  2. {
  3. //获取文本框,因为它位于GridView内部,因此需要特殊手段
  4. TextBox textbox = this.GridView1.BottomPagerRow.Cells[0].FindControl("txtNewPageIndex") as TextBox;
  5. switch (e.CommandName)//根据命令发实现功能
  6. {
  7. case "Select": //参考前例
  8. this.GridView1.Visible = false;//隐藏GridView
  9. this.panDetails.Visible = true;//显示”操作”面板
  10. break;
  11. case "Go": //按钮
  12. try
  13. {
  14. //设定当前页码,实现跳转
  15. this.GridView1.SetPageIndex(int.Parse(textbox.Text) - 1);//页号从0起始
  16. }
  17. catch
  18. {
  19. //输入大于小于实际页码不会报错,这里主要预防输入的字符
  20. Response.Write("<script>alert(\"输入页码错误!\");</script>");
  21. }
  22. break;
  23. default:
  24. break;
  25. }
  26. }
【GridView渐进全解】第四部分GridView分页进阶插图10
代码解读

 最终效果:

【GridView渐进全解】第四部分GridView分页进阶插图11

至此,分页进阶完成,不过还有很多问题没解决,请看下期《分页增强》 


文章结束。创作图文不易,感谢点赞支持,欢迎收藏、关注我后期文章。

By 站长

发表回复

普人特福的博客cnzz&51la for wordpress,cnzz for wordpress,51la for wordpress