Repeater自定义分页排序(2) (转)

本文介绍了一个SQL Server中实现分页与排序功能的存储过程。该存储过程通过使用ROW_NUMBER()窗口函数来生成行号,并结合参数化的查询来实现灵活的排序方式。此外,还提供了一个ASP.NET页面示例,展示了如何调用这些存储过程来实现动态分页和排序。

分页加排序的存储过程:

--得到总记录数
if exists(select 1 from sys.objects where name = 'GetProductsCount' and type = 'P')
	drop proc GetProductsCount
go
CREATE PROCEDURE GetProductsCount
as
	select count(*) from products
go

--分页加排序
if exists(select 1 from sys.objects where name = 'GetProductsByPage' and type = 'P')
	drop proc GetProductsByPage
go
CREATE PROCEDURE GetProductsByPage
	@sortExpression nvarchar(100),
	@pageNumber	int,
	@pageSize	int
AS
-- 确保指定了 @sortExpression
IF LEN(@sortExpression) = 0
	SET @sortExpression = 'ProductID'
DECLARE @sql nvarchar(4000)
set @sql = 'select ProductID, ProductName, SupplierID, CategoryID, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued
	from (select row_number() Over (order by ' + @sortExpression  + ') as row,ProductID, ProductName, SupplierID, CategoryID, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued
	from products) as ProductsWithRowNumber
	where row between ' + convert(varchar, (@pageNumber - 1) * @pageSize + 1) + ' and ' + convert(varchar, @pageNumber * @pageSize)
exec sp_executesql @sql
go

--exec GetProductsByPage 'productid desc', 1, 10
--exec GetProductsByPage 'ProductName desc',5, 10
--exec GetProductsByPage '', 1, 10

页面代码
无法忍受如此垃圾的编辑器,页面代码转换的一塌糊涂,所以Repeater标记部分用图片代替

|<<< 
>>>|  
转到第页  

Repeater页面代码
后台代码如下:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Data.SqlClient;

public partial class RepeaterPagingSorting : System.Web.UI.Page
{
    //每页显示的最多记录的条数
    private int pageSize = 10;
    //当前页号
    private int currentPageNumber;
    //排序表达式
    private string sortExpression = string.Empty;
    //排序方向
    private string sortDirection = string.Empty;
    //显示数据的总条数
    private static int rowCount;
    //总页数
    private static int pageCount;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            SqlConnection cn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
            SqlCommand cmd = new SqlCommand("GetProductsCount", cn);
            cmd.CommandType = CommandType.StoredProcedure;
            cn.Open();
            rowCount = (int)cmd.ExecuteScalar();
            cn.Close();
            pageCount = (rowCount - 1) / pageSize + 1;
            currentPageNumber = 1;
            for (int i = 1; i <= pageCount; i++)
            {
                dropPage.Items.Add(new ListItem(i.ToString(), i.ToString()));
            }
            dropPage.SelectedValue = dropPage.Items.FindByValue(currentPageNumber.ToString()).Value;
            Query();
        }
        sortExpression = ViewState["sortExpression"].ToString();
        sortDirection = ViewState["sortDirection"].ToString();
        currentPageNumber = Convert.ToInt32(ViewState["currentPageNumber"]);
    }

    private void Query()
    {
        SetButton(currentPageNumber);
        SqlConnection cn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
        SqlCommand cmd = new SqlCommand("GetProductsByPage", cn);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@sortExpression", sortExpression + " " + sortDirection);
        cmd.Parameters.AddWithValue("@pageNumber", currentPageNumber);
        cmd.Parameters.AddWithValue("@pageSize", pageSize);
        cn.Open();
        rptProducts.DataSource = cmd.ExecuteReader();
        rptProducts.DataBind();
        cn.Close();
        lblMessage.Text = "共找到" + rowCount + "条记录, 当前第" + currentPageNumber + "/" + pageCount + "页";
        Save();
    }

    protected void lbtnPage_Command(object sender, CommandEventArgs e)
    {
        switch (e.CommandName)
        {
            case "First":
                currentPageNumber = 1;
                break;
            case "Previous":
                currentPageNumber = (int)ViewState["currentPageNumber"] - 1 > 1 ? (int)ViewState["currentPageNumber"] - 1 : 1;
                break;
            case "Next":
                currentPageNumber = (int)ViewState["currentPageNumber"] + 1 < pageCount ? (int)ViewState["currentPageNumber"] + 1 : pageCount;
                break;
            case "Last":
                currentPageNumber = pageCount;
                break;
        }
        dropPage.SelectedValue = dropPage.Items.FindByValue(currentPageNumber.ToString()).Value;
        Query();
    }

    protected void lbtnSort_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName != ViewState["sortExpression"].ToString())
        {
            sortDirection = "ASC";
        }
        else
        {
            if (sortDirection == "ASC")
            {
                sortDirection = "DESC";
            }
            else if (sortDirection == "DESC" || sortDirection == string.Empty)
            {
                sortDirection = "ASC";
            }
        }
        sortExpression = e.CommandName ;
        Query();
    }

    protected void dropPage_SelectedIndexChanged(object sender, EventArgs e)
    {
        currentPageNumber = int.Parse(dropPage.SelectedValue);
        Query();
    }

    private void SetButton(int currentPageNumber)
    {
        lbtnFirst.Enabled = currentPageNumber != 1;
        lbtnPrevious.Enabled = currentPageNumber != 1;
        lbtnNext.Enabled = currentPageNumber != pageCount;
        lbtnLast.Enabled = currentPageNumber != pageCount;
    }

    private void Save()
    {
        ViewState["currentPageNumber"] = currentPageNumber;
        ViewState["sortExpression"] = sortExpression;
        ViewState["sortDirection"] = sortDirection;
    }

    protected void rptProducts_ItemCreated(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Header)
        {
            if (!string.IsNullOrEmpty(sortDirection))
            {
                Label lblSort = new Label();
                lblSort.EnableTheming = false;
                lblSort.Font.Name = "webdings";
                lblSort.Font.Size = FontUnit.Small;
                lblSort.Text = sortDirection == "ASC" ? "5" : "6";
                (e.Item.FindControl("td" + sortExpression) as HtmlTableCell).Controls.Add(lblSort);
            }
        }
    }
}

分页排序效果图: Repeater自定义分页+排序

### 实现省市区镇四级联动的效果 为了在 Vue 项目中使用 `element-china-area-data` 和 Element Plus 的 `<el-cascader>` 组件来实现省市区镇四级联动功能,可以按照以下方式配置。 #### 数据准备 首先需要引入 `element-china-area-data` 提供的 JSON 数据文件。该数据包含了中国地区的省市县乡四级区域划分信息[^1]。可以通过 npm 或 yarn 安装此依赖包: ```bash npm install element-china-area-data --save ``` 安装完成后,在代码中导入并解析这些数据作为级联选择器的数据源。 #### 配置组件 以下是完整的示例代码,展示如何设置 `<el-cascader>` 来支持四级联动效果: ```vue <template> <div> <el-cascader v-model="selectedArea" :options="areaData" placeholder="请选择地区" clearable @change="handleCascaderChange" /> </div> </template> <script> import { ref, onMounted } from 'vue'; // 导入 area data import areaData from 'element-china-area-data'; export default { setup() { const selectedArea = ref([]); // 初始化区域数据 const areaData = ref(areaData); // 处理级联选择变化事件 const handleCascaderChange = (value) => { console.log('当前选中的值:', value); }; onMounted(() => { console.log('已加载区域数据', areaData.value); }); return { selectedArea, areaData, handleCascaderChange, }; }, }; </script> <style scoped> /* 自定义样式 */ .el-cascader { width: 100%; } </style> ``` 上述代码实现了以下几个要点: 1. **绑定选项数据**:通过 `:options="areaData"` 将预处理好的区域数据传递给 `<el-cascader>`。 2. **双向绑定模型值**:利用 `v-model="selectedArea"` 动态跟踪用户的输入状态。 3. **监听变更事件**:当用户完成选择时触发回调函数 `@change="handleCascaderChange"` 并打印所选结果[^2]。 #### 进一步优化 如果希望进一步提升性能或者减少初始渲染时间,则可考虑启用懒加载模式(Lazy Load)。这允许仅在必要时才从服务器获取子节点的信息而不是一次性加载全部数据。具体做法如下所示: 修改后的模板部分增加属性 `props="{ lazy: true, lazyLoad }"` 及其对应的逻辑方法即可满足需求。 --- ### 总结 以上方案展示了基于 `element-plus` 和 `element-china-area-data` 构建省市区镇四级联动的选择器的具体流程以及注意事项。它不仅简单易懂而且具备良好的扩展性和灵活性能够适应多种实际应用场景的需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值