Ext.grid.Panel表格分页示例
代码：
cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.grid.Panel动态加载分页数据</title>
<link href="@Url.Content("~/Scripts/ext-4.0.7-gpl/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/ext-4.0.7-gpl/bootstrap.js")" type="text/javascript"></script>
<script type="text/javascript">
Ext.require([
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.data.*'
]);
Ext.onReady(function () {
Ext.define("Province", {
extend: "Ext.data.Model",
fields: [
{ name: "ProvinceID" },
{ name: "ProvinceNo" },
{ name: "ProvinceName" }
]
});
var store = Ext.create("Ext.data.JsonStore", {
pageSize: 10, // 分页大小
model: "Province",
proxy: {
type: "ajax",
url: "/Province/List",
reader: {
type: "json",
root:"root",
totalProperty: 'totalProperty'
}
}
});
store.loadPage(1);
Ext.create("Ext.grid.Panel", {
title: "Ext.grid.Panel",
renderTo: Ext.getBody(),
frame: true,
height: 310,
width: 400,
store: store,
columns: [
{ header: "ID", width: 50, dataIndex: "ProvinceID", sortable: true },
{ header: "编号", width: 100, dataIndex: "ProvinceNo", sortable: true },
{ header: "名称", width: 135, dataIndex: "ProvinceName", sortable: true }
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示{0}-{1}条，共{2}条',
emptyMsg: "没有数据"
})
});
});
</script>
</head>
<body>
</body>
</html> controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Northwind.Domain.Entities;
using Northwind.Data;
using Northwind.Service;
namespace Northwind.Web.Controllers
{
public class ProvinceController : Controller
{
private IProvinceService provinceService;
public ProvinceController(IProvinceService provinceService)
{
this.provinceService = provinceService;
}
public ActionResult Grid()
{
return View();
}
/// <summary>
/// 省份分页数据
/// </summary>
/// <param name="page">当前页</param>
/// <param name="limit">分页大小</param>
/// <returns></returns>
public JsonResult List(int page, int limit)
{
int totalRecords;
return Json(new { root = provinceService.GetPaged(page, limit, out totalRecords), totalProperty = totalRecords }, JsonRequestBehavior.AllowGet);
}
}
} 效果图：
