项目本来使用的是webgrid。后台弃用改成Jqgrid插件。
首先介绍一下webgrid的用法：webgrid是mvc中HtmlHelper自带的。首先创建viewmodel用于数据的绑定，然后在页面中进行绑定一些参数的设置即可
具体如下：
@model Models.SearchPageViewModel
@{
WebGrid grid = new WebGrid(null,
rowsPerPage: Model.PagingInfo.ItemsPerPage,
selectionFieldName: "selectedRow",
ajaxUpdateContainerId: "gridContent",
canSort: false);
grid.Bind(Model.modelList, autoSortAndPage: false, rowCount: Model.PagingInfo.TotalItems);
}
@if (grid.TotalRowCount > 0)
{
@grid.GetHtml(
tableStyle: "GridViewTable",
headerStyle: "HeaderStyle",
footerStyle: "FooterStyle",
rowStyle: "RowStyle",
alternatingRowStyle: "AltRowStyle",
selectedRowStyle: "SelectedRowStyle",
mode: WebGridPagerModes.All,
numericLinksCount: 10,
firstText: "首页",
lastText: "尾页",
previousText: "
nextText: ">",
columns: grid.Columns(
grid.Column("RowNum", "序号", format: (item) => item.RowNum),
grid.Column("XZQDM", "行政区代码", format: (item) => item.XZQDM, style: null, canSort: false),
grid.Column("XZQMC", "行政区名称", format: (item) => item.XZQMC, canSort: false),
grid.Column("UPTIME", "上传时间", format: (item) => item.UPTIME, canSort: false),
grid.Column(header: "选择",
format: @)
))
Jqgrid用法大同小异：
需要引用
第一步：定义一个呈现数据的表格
第二部：在js里面进行相关设置
var grid = $("#gridUploadProg");
grid.jqGrid({
url: ‘ResultManage/QueryData‘,
mtype: ‘post‘,
datatype: ‘json‘,
loadonce: false,
data: {},
colNames: [‘项目ID‘, ‘行政区代码‘, ‘行政区名称‘],
colModel: [
{ name: ‘XMID‘, index: ‘XMID‘, sortable: false, key: true, align: ‘center‘, hidden: true },
{ name: ‘XZQDM‘, index: ‘XZQDM‘ },
{ name: ‘XZQMC‘, index: ‘XZQMC‘, align: ‘center‘ },
{ name: ‘XMMC‘, index: ‘XMMC‘, align: ‘center‘ }
],
rowNum: 10,
rowList: [10, 15, 20, 30],
pager: ‘#gridUploadProgPager‘,
emptyrecords: "没有符合要求的数据",
gridview: true,
rownumbers: true,
sortname: ‘ProvinceCode‘,
viewrecords: true,
sortorder: ‘asc‘,
multiselect: true,
caption: ‘任务管理列表‘,
jsonReader: {
page: ‘page‘,
total: ‘total‘,
records: ‘records‘,
root: ‘rows‘
},
height: ‘100%‘,
loadui: ‘block‘,
autoScroll: false,
loadComplete: function (data) { //完成服务器请求后，回调函数
// alert(data.records);
if (data.records == 0) { //如果没有记录返回，追加提示信息
$("p").appendTo($("#gridUploadProg")).addClass("nodata").html("找不到相关数据！");
}
else { //否则，删除提示
$("p.nodata").remove();
}
}
});
第三步：在control里面进行模型的获取JSON的转换
public void QueryData(string sidx = "XZQDM", string sord = "DESC", int rows = 10, int page = 1)
{
SearchConditionModel searchCondition = new SearchConditionModel();
if (this.Session["SearchCondition"] != null)
{
searchCondition = (SearchConditionModel)this.Session["SearchCondition"];
}
int totalRecord = 0;
IEnumerable modelList = this.TaskManageDataContext.GetModelList(
out totalRecord,
provinceCode: searchCondition.XZQ,
rwlx: searchCondition.RWLX,
taskResult: searchCondition.SFTG,
orderField: sidx,
orderType: sord,
pageIndex: page,
pageSize: rows
);
//int index = (page - 1) * rows; // 开始记录数
int totalPage = totalRecord % rows == 0 ? totalRecord
/ rows : totalRecord / rows + 1; // 计算总页数
int pagesize = rows;
string son = Newtonsoft.Json.JsonConvert.SerializeObject(modelList);
son = "{ \"page\": " + page.ToString() + ", \"total\": " + totalPage.ToString() + ", \"records\": " + totalRecord.ToString() + ", \"rows\": " + son + "}";
Response.Write(son);
}
以后每一次分页查询都会进到这个action里面，实现分页实时查询数据。JSON数据前面一定要加记录数等信息用于分页的显示。当然还有其他方法返回json数据。理想的格式应该的返回JsonResult的。像这样 return Json(modelList, JsonRequestBehavior.AllowGet);这种方法我还没有测试，不清楚能不能返回数据到界面上。这种方法看起来明显正规一点
原文：http://www.cnblogs.com/xibei/p/4917074.html