jQuery Grid

MIT
跨平台
2015-05-05
大胖森

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

具有以下特征:

  • 时尚的表格数据呈现控件。

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

  • 可启用 Ajax。

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

  • 与 ASP.NET 集成,很简单。

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

  • 支持 jQuery UI 和引导(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);  
    }  
  }
加载中

评论(9)

H
HL三个石头
感觉页面显示效果不太好
学习运营的程序猿
学习运营的程序猿
大多数时候,不是我们不努力,而是不知从何下手,我深知一份好的学习资料是多么的重要,我们通常会把大量的时间都浪费在找资源上。有时候就算有了视频资源,但是没有一个清晰的学习路线,我们依旧 会事倍功半, 海量资源,不用到处找,V薪关注【八戒程序猿】就够了。系统学习编程,并没有培训班那么贵。
水溶C100
水溶C100
难用的要死,配这么多js,页面变的越来慢,直接用bootstrap算了。。。
大树哥
大树哥
给个地址啊
一匹萝卜
一匹萝卜
给这个有毛线用,连下载地址都不给
帅的不像男的
帅的不像男的
用过,很好用,但是还是有一点点瑕疵!
程序猿**
程序猿**
1
g
git用户1192156
没有下载地址
yannis_123
yannis_123
1

暂无资讯

暂无问答

7+ jQuery Microsoft Excel Type Plugins

7+ jQuery Microsoft Excel Type Plugins In no particular order, we give you a handpicked collection of 7+ jQuery Microsoft Excel Type plugins you may have not used before! You wo...

2013/05/11 16:29
133
0
我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

2014/03/05 10:42
536
0
【转】240多个jQuery插件

参考文档:http://www.cnblogs.com/terrylee/articles/988623.html 文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an in...

2013/05/28 15:55
146
1
[JavaScript]240个jQuery实现AJAX插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 00:12
51
0
强烈推荐:240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 11:53
218
0
推荐N多jquery插件。相当实用!

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j...

2013/01/04 15:52
117
0
240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是―写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼...

2014/07/30 10:02
37
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部