jQuery Grid 能夠在 ASP.NET MVC 中輕松地實現(xiàn)分頁、 排序、 篩選以及 jQuery 插件網(wǎng)格中的 CRUD 操作。

具有以下特征：時尚的表格數(shù)據(jù)呈現(xiàn)控件。

JavaScript 控件用于表示和處理 web 上的表格數(shù)據(jù)。

可啟用 Ajax。

可以與任何 ASP、 JavaServelets、 JSP、 PHP 等服務器端的技術集成。

與 ASP.NET 集成，很簡單。

支持分頁、JavaScript 和服務器端數(shù)據(jù)源。

支持 jQuery UI 和引導(Bootstrap)。

要使用網(wǎng)格插件，則將需要一個 HTML 表標記為網(wǎng)格的基本元素順序。建議用表的"數(shù)據(jù)源"屬性，作為服務器端的源 URL 的位置標識。

初始化表格作為網(wǎng)格中顯示的字段：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);

}

}

總結

以上是生活随笔為你收集整理的php jquery grid,jQuery Grid的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。