jquery grid java_jQuery Grid首页、文档和下载 - jQuery表格插件 - OSCHINA - 中文开源技术交流社区...

jQuery Grid 能够在 ASP.NET MVC 中轻松地实现分页、 排序、 筛选以及 jQuery 插件网格中的 CRUD 操作。

具有以下特征：时尚的表格数据呈现控件。

JavaScript 控件用于表示和处理 web 上的表格数据。

可启用 Ajax。

可以与任何 ASP、 JavaServelets、 JSP、 PHP 等服务器端的技术集成。

与 ASP.NET 集成，很简单。

支持分页、JavaScript 和服务器端数据源。

支持 jQuery UI 和引导(Bootstrap)。

要使用网格插件，则将需要一个 HTML 表标记为网格的基本元素顺序。建议用表的"数据源"属性，作为服务器端的源 URL 的位置标识。

初始化表格作为网格中显示的字段：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);

}

}