php jquery grid,jQuery Grid
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: php常用操作字符串函数,php字符串几
- 下一篇: php txt,PHP规范TXT文件