android gridview分页显示,GridView使用自带分页功能时分页方式及样式PagerStyle

GridView分页,使用自带分页功能,类似下面样式:

20131122005421_3788.jpg

在aspx页面中,GridView上的PagerStyle下CssClass属性,设置为bubufxPagerCss,具体aspx页面代码:

AllowPaging="True" EmptyDataText="没有数据记录!!" OnPageIndexChanging="GridView1_PageIndexChanging"

ShowHeader="False" GridLines="None">

PreviousPageText="上一页" Mode="NumericFirstLast" />

CssClass="bubufxPagerCss" />

aspx.cs代码:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.OleDb;

using System.Data;

public partial class list : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

dataBind();

}

}

private void dataBind()

{

string sql = "select * from tt ";

try

{

DataTable DT = new DataTable();

//

string connStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("db.mdb");

OleDbConnection conn = new OleDbConnection(connStr);

if (conn.State == ConnectionState.Closed) conn.Open();

OleDbDataAdapter da = new OleDbDataAdapter(sql, conn);

da.Fill(DT);

conn.Close();

//

GridView1.DataSource = DT;

GridView1.DataBind();

}

catch (Exception ex)

{

Response.Write("数据库错误,错误原因:" + ex.Message);

Response.End();

}

}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

GridView1.PageIndex = e.NewPageIndex;

dataBind();

}

}

css代码:

.bubufxPagerCss table

{

text-align:center;

margin:auto;

}

.bubufxPagerCss table td

{

border:0px;

padding:5px;

}

.bubufxPagerCss td

{

border-left: #ffffff 3px solid;

border-right: #ffffff 3px solid;

border-bottom: #ffffff 3px solid;

}

.bubufxPagerCss a

{

color:#231815;text-decoration:none;padding:3px 6px 3px 6px; margin: 0 0 0 4px; text-align:center; border:1px solid #ac1f24;

}

.bubufxPagerCss span

{

color:#fefefe;background-color:#ac1f24; padding:3px 6px 3px 6px; margin: 0 0 0 4px; text-align:center; font-weight:bold; border:1px solid #ac1f24;

}

这样就实现自带分页的页码样式了。

### UniApp 中实现金刚区滑动效果 在 UniApp 开发中,可以通过 `scroll-view` 组件配合横向滚动属性以及动态数据渲染的方式实现金刚区的滑动效果。以下是具体实现方法: #### 使用 scroll-view 实现横向滑动 `scroll-view` 是 UniApp 提供的一个支持滚动视图的组件,设置其 `scroll-x="true"` 属性可以开启横向滚动功能[^1]。 ```html <template> <view class="container"> <!-- 横向滚动容器 --> <scroll-view class="scroll-view" scroll-x="true" :show-scrollbar="false"> <block v-for="(item, index) in items" :key="index"> <view class="card-item">{{ item }}</view> </block> </scroll-view> </view> </template> <script> export default { data() { return { items: ['卡片一', '卡片二', '卡片三', '卡片四'] // 动态数据列表 }; } }; </script> <style> .container { width: 100%; } .scroll-view { white-space: nowrap; /* 防止子项换行 */ display: flex; } .card-item { display: inline-block; margin-right: 20px; padding: 20px; background-color: #f0f0f0; border-radius: 8px; } </style> ``` 上述代码展示了如何利用 `scroll-view` 和 Vue 的模板语法创建一个简单的横向滑动区域。其中,`items` 数据源决定了显示的内容数量和具体内容。 #### 自定义分页金刚区 Grid 布局 如果需要更复杂的布局,比如带有分页逻辑的金刚区,则可以通过嵌套循环结构完成。例如,先将整个数据分为多个小组,每组对应一个面;然后,在外层使用 `scroll-view` 或其他方式切换这些面[^2]。 ```html <template> <view class="container"> <scroll-view class="page-scroll" scroll-x="true" :show-scrollbar="false"> <block v-for="(group, groupIndex) in groups" :key="groupIndex"> <view class="page-container"> <view class="grid-item" v-for="(item, index) in group" :key="index"> {{ item }} </view> </view> </block> </scroll-view> </view> </template> <script> export default { data() { const allItems = Array.from({ length: 20 }, (_, i) => `项目${i + 1}`); const pageSize = 6; function splitIntoGroups(data, size) { let result = []; for (let i = 0; i < data.length; i += size) { result.push(data.slice(i, i + size)); } return result; } return { groups: splitIntoGroups(allItems, pageSize), }; }, }; </script> <style> .page-scroll { white-space: nowrap; display: flex; } .page-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-width: 300px; padding: 10px; box-sizing: border-box; } .grid-item { text-align: center; line-height: 50px; height: 50px; background-color: #eaeaea; border-radius: 4px; } </style> ``` 此示例实现了带分页的金刚区设计,通过计算函数将原始数据分割成若干个小数组,并在外层再次应用 `v-for` 循环逐一渲染每个分页内容。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值