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 条评论,请先登录后再查看。

暂无资讯

暂无问答

jquery grid

The good news is that you don't really need to extend the standard custom formatter. Instead of that you want probably just share the code. So you can define the common code as ...

2015/11/19 10:27
279
0
jquery好用的grid

http://www.trirand.com/blog/ http://layout.jquery-dev.net/

2011/11/05 23:55
442
0
jQuery Grid入门指南

上周需要把一个项目中的普通table改成使用jQuery插件形式的表格,找到了jqgrid这个插件,本以为找个demo,查查api就能解决,没想到还是费了一番的功夫,在这里记录总结一下。 本文实现的内容...

2018/04/15 15:15
95
0
jquery mobile合并grid

<div id="findBar" class="ui-grid-a"> <div class="ui-block-a"><input placeholder="" data-theme="e" type="search" name="sw" id="sw" value="" data-mini="true"/></div> <div class="...

2012/08/13 21:33
3K
0
jQuery Grid高级指南

上周以为已经把jqgrid 表格这部分已经搞得差不多了,没想到在实际用的时候,出现了不少问题,重新把这块知识整理一下。 问题一:设置表格的自动刷新 问题的原因:   使用表格自带的增删改查...

2018/04/21 18:46
12
0
我淘到的各种jQuery Grid网格插件

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

2014/03/05 10:42
672
0
jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别

$(function(){})已经是一个匿名函数了,在里面定义的函数已经是私有了,不能全局访问。把函数定义在全局,也就是function外面,这样外部才能调用。 Jquery是优秀的Javascrīpt框架。我们现在...

2018/03/26 16:45
64
0
You-Dont-Need-JQuery (你不需要JQuery)

看完这篇文章我才觉得真的要用JQuery ,因为实在是有些地方设计的使用太复杂了, document.querySelector() 和 Document.querySelectorAll 的确是很方便的API... 不过很多功能还是用JQuery实...

2018/03/14 00:12
225
0
JQuery - $, JQuery, Window.load, JQuery.ready

开篇之前偶然间看到和这篇文章有关的Stackoverflow的一个thread,在这里摘录。 $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready alert("docume...

2014/01/17 16:13
85
0
jquery-3 jquery选择器

jquery-3 jquery选择器 一、总结 一句话总结:选择器使用的时候可以结合参考手册,里面都已经详细归类好了。(多用才能熟啊) 1、$(:input).css({'color':'#987654'}); 中的css方法中的参数是...

2018/06/21 03:16
137
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部