MVC WebGrid 仅对页面上存在的元素进行排序

Posted 2023-03-27

【中文标题】MVC WebGrid 仅对页面上存在的元素进行排序

【英文标题】：MVC WebGrid Sort only the elements present on the page

【发布时间】：2015-12-29 06:54:28

【问题描述】：

我正在尝试制作 MVC WebGrid，我能够让网格正常工作，但面临排序问题。我将rowsPerPage 设置为 5，总共有 7 条记录。当我在第一页时，它显示前 5 条记录；当我对 Id 列进行排序时，它会对所有数据进行排序并将第 7 条记录放在顶部。

我的问题：

如何使其仅对第一页中的元素进行排序并放置 第 5 条记录在上面。 如何为其创建的数据行添加样式？

代码是这样的： CShtml -

@model IEnumerable<Product>

@
    ViewBag.Title = "grid";
    WebGrid grid = new WebGrid(Model, rowsPerPage: 5 );


@grid.GetHtml(

    tableStyle: "table",
    fillEmptyRows: true,        
    headerStyle: "main-box-header clearfix",
    footerStyle: "pagination pull-right",

    mode: WebGridPagerModes.All, //paging to grid 
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",

    columns: new[]  // colums in grid
    
        grid.Column("Id"), //the model fields to display
        grid.Column("Name"  ),
        grid.Column("Description"),
        grid.Column("Quantity"),

   )

控制器 -

public ActionResult WebgridSample()
        
            List<Product> inventoryList = new List<Product>();  

            inventoryList.Add(new Product
            
                Id = "P101",
                Name = "Computer",
                Description = "All type of computers",
                Quantity = 800
            );
            inventoryList.Add(new Product
            
                Id = "P102",
                Name = "Laptop",
                Description = "All models of Laptops",
                Quantity = 500
            );
            inventoryList.Add(new Product
            
                Id = "P103",
                Name = "Camera",
                Description = "Hd  cameras",
                Quantity = 300
            );
            inventoryList.Add(new Product
            
                Id = "P104",
                Name = "Mobile",
                Description = "All Smartphones",
                Quantity = 450
            );
            inventoryList.Add(new Product
            
                Id = "P105",
                Name = "Notepad",
                Description = "All branded of notepads",
                Quantity = 670
            );
            inventoryList.Add(new Product
            
                Id = "P106",
                Name = "Harddisk",
                Description = "All type of Harddisk",
                Quantity = 1200
            );
            inventoryList.Add(new Product
            
                Id = "P107",
                Name = "PenDrive",
                Description = "All type of Pendrive",
                Quantity = 370
            );

            return View(inventoryList);

          

【参考方案1】：

也许这不是真正的话题，但我会回答 实现这个东西最有效的方法是做服务端排序：

1) 在控制器中，您将拥有 4 个新参数

public ActionResult WebgridSample(int pageNum = 1, int pageSize = 5, string sortColumnName = "",   string sortOrder = "desc")

2) 在您发出 SQL SELECT 请求后，您可以指出需要从哪个位置检索条目并进行排序（sortOrder = "" 以“按原样”获取列表）

3) 使 Bind() 方法在禁用 autoSortAndPaging 参数的情况下执行，应该指出总条目（之前的构造函数应该知道 rowsPerPage）

4) 将所需数据加载到 webgrid 后不要忘记指向页码

恭喜:)