jQuery Grid

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

具有以下特征：

• 時(shí)尚的表格數(shù)據(jù)呈現(xiàn)控件。

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

• 可啟用 Ajax。

• 可以與任何 ASP、 JavaServelets、 JSP、 PHP 等服務(wù)器端的技術(shù)集成。

• 與 ASP.NET 集成，很簡(jiǎn)單。

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

• 支持 jQuery UI 和引導(dǎo)（Bootstrap）。

  
  

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

<table id="grid" data-source="@Url.Action("GetPlayers")"></table>

初始化表格作為網(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] }  
});

簡(jiǎn)單的 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() });  
  }

服務(wù)器端

在控制器中需要四種方法：索引、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);  
    }  
  }