1. 创建 WebGrid 实例:
首先,在页面中创建一个 WebGrid 实例,通常在 Razor 语法中使用 @{ ... } 语法块:
@{
var data = new[] {
new { ID = 1, Name = "John", Age = 25 },
new { ID = 2, Name = "Jane", Age = 30 },
new { ID = 3, Name = "Bob", Age = 22 }
};
var grid = new WebGrid(data);
}
2. 在网页上显示 WebGrid:
使用 grid.GetHtml() 方法生成 HTML 表格,然后将其插入到页面中:
@grid.GetHtml()
这将在页面上呈现一个简单的表格,显示数据源中的数据。
3. 指定列名和显示的列:
可以使用 columns 参数指定要显示的列和列名:
@grid.GetHtml(columns: grid.Columns(
grid.Column("ID", "User ID"),
grid.Column("Name", "Username"),
grid.Column("Age", "User Age")
))
4. 启用分页:
可以启用分页,并设置每页显示的行数:
@grid.GetHtml(
columns: grid.Columns(
grid.Column("ID", "User ID"),
grid.Column("Name", "Username"),
grid.Column("Age", "User Age")
),
rowsPerPage: 2,
canPage: true
)
5. 自定义样式:
可以通过添加 CSS 类来自定义表格的样式:
@grid.GetHtml(
tableStyle: "table",
headerStyle: "header",
footerStyle: "footer",
alternatingRowStyle: "alt",
selectedRowStyle: "selected",
rowStyle: "row"
)
6. 排序:
可以启用列排序:
@grid.GetHtml(
columns: grid.Columns(
grid.Column("ID", "User ID", canSort: true),
grid.Column("Name", "Username", canSort: true),
grid.Column("Age", "User Age", canSort: true)
),
canSort: true
)
完整示例:
@{
var data = new[] {
new { ID = 1, Name = "John", Age = 25 },
new { ID = 2, Name = "Jane", Age = 30 },
new { ID = 3, Name = "Bob", Age = 22 }
};
var grid = new WebGrid(data);
}
<!DOCTYPE html>
<html>
<head>
<title>WebGrid Example</title>
<style>
.table {
border-collapse: collapse;
width: 100%;
}
.table, .th, .td {
border: 1px solid black;
}
.th, .td {
padding: 8px;
text-align: left;
}
.alt {
background-color: #f2f2f2;
}
.selected {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>WebGrid Example</h2>
@grid.GetHtml(
columns: grid.Columns(
grid.Column("ID", "User ID", canSort: true),
grid.Column("Name", "Username", canSort: true),
grid.Column("Age", "User Age", canSort: true)
),
canSort: true,
tableStyle: "table",
headerStyle: "th",
alternatingRowStyle: "alt",
selectedRowStyle: "selected",
rowStyle: "td"
)
</body>
</html>
上述示例演示了基本的 WebGrid 使用方法,包括显示数据、指定列、启用分页和排序等。你可以根据实际需求进一步自定义和扩展。
转载请注明出处:http://www.pingtaimeng.com/article/detail/14692/ASP.NET