本文共 1996 字,大约阅读时间需要 6 分钟。
Gridview的仅用CSS的Bootstrap分页
本文描述了使用bootstrap CSS的.table类的ASP.NET gridview
的bootstrap分页实现。
我最近在bootstrap模板中使用ASP.NET gridview。分页在.pagination类中的bootstrap CSS中以ul li格式给出。但ASP.NET gridview控件动态地在嵌套表中进行分页。但在仔细观察gridview分页HTML标签后,我发现了一个简单的解决方案。
仅仅是修改我们在gridview中使用的.table类。Gridview分页行在表格内,当前页码保持在span控件内,与其他页面链接不同。
将bootstrap CSS放在标题上。
现在,我们需要在gridview中修改分页,为.table表编写CSS规则——类似.pagination类的ul li。
在其中为.table和嵌套表添加额外的CSS ,如下所示。这些属性取自.pagination CSS。(译者:以下是分页完整的自定义css,在自己的项目中新建一个css文件保存即可)
/*gridview*/.table table tbody tr td a ,.table table tbody tr td span {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;text-decoration: none;background-color: #fff;border: 1px solid #ddd;}.table table > tbody > tr > td > span {z-index: 3;color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}.table table > tbody > tr > td:first-child > a,.table table > tbody > tr > td:first-child > span {margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}.table table > tbody > tr > td:last-child > a,.table table > tbody > tr > td:last-child > span {border-top-right-radius: 4px;border-bottom-right-radius: 4px;}.table table > tbody > tr > td > a:hover,.table table > tbody > tr > td > span:hover,.table table > tbody > tr > td > a:focus,.table table > tbody > tr > td > span:focus {z-index: 2;color: #23527c;background-color: #eee;border-color: #ddd;}/*end gridview */
你的gridview分页类已准备就绪。
现在,把这个类放在gridview中,如下:
现在,在代码视图的页面加载中将此代码添加到databind gridview:
DataTable dt = new DataTable(); dt.Columns.Add("Sl"); dt.Columns.Add("data"); dt.Columns.Add("heading1"); dt.Columns.Add("heading2"); for (int i = 0; i < 100; i++) { dt.Rows.Add(new object[] { i ,123*i, 4567*i , 2*i , }); } GridView1.DataSource = dt; GridView1.DataBind();
以下是输出:
注:asp.net项目只是一个举例,可考虑使用在你喜欢的地方,放飞一把自己~~~
原文地址:
转载地址:http://wyzhj.baihongyu.com/