[英]Asynchronously sort GridView in ASP.NET MVC using Ajax
I'm using WebGrid to display data on client side, canSort: true
is set. 我正在使用WebGrid在客户端显示数据, canSort: true
设置为canSort: true
。
@model UI.Models.TestModel
@if (Model.listTestModel != null)
{
var grid = new WebGrid(Model.listTestModel,
null,
defaultSort: "ColumnA",
rowsPerPage: 25,
canPage: true,
canSort: true
);
@grid.GetHtml(
mode: WebGridPagerModes.All,
columns: grid.Columns
(
grid.Column(columnName: "ColumnA", header: "ColumnA"),
grid.Column(columnName: "ColumnB", header: "ColumnB")
)
)
}
I'm able to sort data by clicking column headers. 我可以通过单击列标题对数据进行排序。
Problem: 问题:
How can someone asynchronously sort the WebGrid using Ajax? 如何使用Ajax异步对WebGrid进行排序?
Thanks to Jamie Dunstan for pointing this out. 感谢Jamie Dunstan指出这一点。
One need to make sure that the entire
WebGrid
code is inside a div with a unique id . 需要确保整个WebGrid
代码位于具有唯一ID的div内。 Also, jQuery is referenced while Javascript is enabled. 此外,启用Javascript时引用jQuery。
<div id='unique id goes here'>
@model UI.Models.TestModel
@if (Model.listTestModel != null)
{
var grid = new WebGrid(Model.listTestModel,
null,
defaultSort: "ColumnA",
rowsPerPage: 25,
canPage: true,
canSort: true,
ajaxUpdateContainerId: "unique id goes here"
);
@grid.GetHtml(
mode: WebGridPagerModes.All,
columns: grid.Columns
(
grid.Column(columnName: "ColumnA", header: "ColumnA"),
grid.Column(columnName: "ColumnB", header: "ColumnB")
)
)
}
<div>
<script>
$(document).ready(function () {
function updateGrid(e) {
e.preventDefault();
var url = $(this).attr('href');
var grid = $(this).parents('.ajaxGrid');
var id = grid.attr('id');
grid.load(url + ' #' + id);
};
$('.ajaxGrid table thead tr a').on('click', updateGrid);
$('.ajaxGrid table tfoot tr a').on('click', updateGrid);
});
</script>
Notice that .live
function is replaced with .on
because of depreciation 请注意,由于折旧 , .live
函数将替换为.on
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.