我正在使用WebGrid在客户端显示数据,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")
)
)
}
我可以通过单击列标题对数据进行排序。
问题:
有人如何使用Ajax对WebGrid进行异步排序?
感谢Jamie Dunstan指出这一点。
需要确保整个
WebGrid
代码在具有唯一id的div内。另外,启用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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句