大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
作者：josh-jw
介绍
我们可以在web页面用HTML表格元素定义WebGrid显示数据，它以非常简单的方式呈现表格数据，支持自定义格式列，分页，排序，并通过AJAX异步更新。
WebGrid主要属性：
Source -数据来自哪里。 通常情况下，通过controller action传递model
DefaultSort -定义如何将数据排序。只要在这里提供列名。
RowsPerPage -每页表格显示的记录数。
CanPage -允许分页。
CanSort -允许通过点击列标题排序。
SelectedFieldName -获取查询字符串字段，用于指定所选行WebGrid实例的全名。
代码使用
在这篇文章中， MVC 4应用程序中使用WebGrid。 首先，我要创建一个名为Product的Model。
Product.cs
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public long Quantity { get; set; }
}
我使用Razor视图引擎，InventoryController包含下面的action:
InventoryController.cs
public ActionResult WebgridSample()
{
ObservableCollection inventoryList =
new ObservableCollection();
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);
}
在WebgridSample视图里，我创建了WebGrid并在调用GetHtml时指定列。
WebgridSample.cshtml:
@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
selectionFieldName: “selectedRow”,ajaxUpdateContainerId: “gridContent”);
grid.Pager(WebGridPagerModes.NextPrevious);
}
WebGrid helper允许我们添加页眉，页脚，行和交替行元素的样式。
.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#FCFCFC;}
.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.select{background-color: #389DF5}
添加列到表格中并指定列名、排序方式、字段绑定。
@grid.GetHtml(tableStyle: “webGrid”,
headerStyle: “header”,
alternatingRowStyle: “alt”,
selectedRowStyle: “select”,
columns: grid.Columns(
grid.Column(“Id”, format: (item) => item.GetSelectLink(item.Id)),
grid.Column(“Name”, ” Name”),
grid.Column(“Description”, “Description”, style: “description”),
grid.Column(“Quantity”, “Quantity”)
))
为了浏览选定的项目，我使用了Id列的format参数。Oolumn方法的format参数，允许我们自定义数据项的渲染。
grid.Column(“Id”, format: (item) => item.GetSelectLink(item.Id))
下面的代码展示了如何以HTML代码方式显示选中的列，为此，我创建了一个Product模型实例。
@{
InventoryManagement.Models.Product product = new InventoryManagement.Models.Product();
}
@if (grid.HasSelection)
{
product = (InventoryManagement.Models.Product)grid.Rows[grid.SelectedIndex].Value;
Id @product.Id
Name @product.Name
Description @product.Description
Quantity @product.Quantity
}
为了避免页面分页时刷新，我们可以添加AJAX参数ajaxUpdateContainerId，包含网格的DIV标记。在这里，我们可以指定ajaxUpdateContainerId为div的id。
ajaxUpdateContainerId: “gridContent”
添加jQuery引用：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/186929.html原文链接：https://javaforall.net
