jQueryGrid能够在ASP.NETMVC中轻松地实现分页、排序、筛选以及jQuery插件网格中的CRUD操作。
具有以下特征：
时尚的表格数据呈现控件。
JavaScript控件用于表示和处理web上的表格数据。
可启用Ajax。
可以与任何ASP、JavaServelets、JSP、PHP等服务器端的技术集成。
与ASP.NET集成，很简单。
支持分页、JavaScript和服务器端数据源。
支持jQueryUI和引导（Bootstrap）。
要使用网格插件，则将需要一个HTML表标记为网格的基本元素顺序。建议用表的"数据源"属性，作为服务器端的源URL的位置标识。
<table id="grid" data-source="@Url.Action("GetPlayers")"></table>初始化表格作为网格中显示的字段：
grid = $("#grid").grid({ dataKey: "ID", uiLibrary: "bootstrap", columns: [ { field: "ID", width: 50, sortable: true }, { field: "Name", sortable: true }, { field: "PlaceOfBirth", title: "Place Of Birth", sortable: true }, { field: "DateOfBirth", title: "Date Of Birth", sortable: true }, { field: "Edit", title: "", width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Edit", events: { "click": Edit } }, { field: "Delete", title: "", width: 34, type: "icon", icon: "glyphicon- remove", tooltip: "Delete", events: { "click": Remove } } ], pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] } });简单的CRUD操作示例：
function Add() { $("#playerId").val(""); $("#name").val(""); $("#placeOfBirth").val(""); $("#dateOfBirth").val(""); $("#playerModal").modal("show"); } function Edit(e) { $("#playerId").val(e.data.id); $("#name").val(e.data.record.Name); $("#placeOfBirth").val(e.data.record.PlaceOfBirth); $("#dateOfBirth").val(e.data.record.DateOfBirth); $("#playerModal").modal("show"); } function Save() { var player = { ID: $("#playerId").val(), Name: $("#name").val(), PlaceOfBirth: $("#placeOfBirth").val(), DateOfBirth: $("#dateOfBirth").val() }; $.ajax({ url: "Home/Save", type: "POST", data: { player: player } }) .done(function () { grid.reload(); $("#playerModal").modal("hide"); }) .fail(function () { alert("Unable to save."); $("#playerModal").modal("hide"); }); } function Remove(e) { $.ajax({ url: "Home/Remove", type: "POST", data: { id: e.data.id } }) .done(function () { grid.reload(); }) .fail(function () { alert("Unable to remove."); }); } function Search() { grid.reload({ searchString: $("#search").val() }); }服务器端
在控制器中需要四种方法：索引、GetPlayers、保存和删除。
[NoCache] public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpGet] public JsonResult GetPlayers(int? page, int? limit, string sortBy, string direction, string searchString = null) { int total; var records = new GridModel().GetPlayers(page, limit, sortBy, direction, searchString, out total); return Json(new { records, total }, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult Save(Player player) { new GridModel().Save(player); return Json(true); } [HttpPost] public JsonResult Remove(int id) { new GridModel().Remove(id); return Json(true); } }[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)] public sealed class NoCacheAttribute : ActionFilterAttribute { public override void OnResultExecuting(ResultExecutingContext filterContext) { filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1)); filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false); filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache); filterContext.HttpContext.Response.Cache.SetNoStore(); base.OnResultExecuting(filterContext); } }
评论