jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）

jsonReader: {
　　　　id: "Id", //相当于设置主键
　　　　root: "JsonArray",　　　 //Json数据
　　　　total: "TotalPage",　　 //总页数
　　　　page: "CurrentPage",　　//当前页
　　　　records: "TotalRecord",//总记录数
　　　　repeatitems: false
　　},

这样一来，对于数据表格，在C#中，我可以用一个泛型类，就能够与jqGrid表格进行交互(其中，包括了分页信息，数据内容)。

/// <summary>
 /// 分页ViewModel
 /// </summary>
 public class jQGrid<T> where T : class
 {
  public jQGrid()
  { }
  /// <summary>
  /// 带4个参数的构造函数
  /// </summary>
  /// <param name="rows">每页显示行数</param>
  /// <param name="currentPage">当前页</param>
  /// <param name="totalRecord">结果总记录数</param>
  /// <param name="jsonArray">JSON数据</param>
  public jQGrid(int rows, int currentPage, int totalRecord, IList<T> jsonArray)
  {
   TotalPage = this.CalculateTotalPage(rows, totalRecord);
   CurrentPage = currentPage;
   TotalRecord = totalRecord;
   JsonArray = jsonArray;
  }
  public int TotalPage { get; set; }
  public int CurrentPage { get; set; }
  public int TotalRecord { get; set; }
  public IList<T> JsonArray { get; set; }
  /// <summary>
  /// 根据每页显示数与总记录数计算出总页数
  /// </summary>
  /// <param name="rows">每页显示数</param>
  /// <param name="totalRecord">结果总记录数</param>
  /// <returns></returns>
  public int CalculateTotalPage(int rows, int totalRecord)
  {
   return Convert.ToInt32(Math.Ceiling((double)totalRecord / (double)rows));
  }
 }

3、搜索的实现

搜索的实现主要通过jqGrid的postData像服务器端传递参数。

$("#btnSearch").click(function () {
　　　　var rules = "";
　　　　$("#multipleSearchDialog").each(function (i) {
　　　　　　$(".div-padding :input").each(function () {
　　　　　　　　if ($(this).val()) {
　　　　　　　　　　rules += '"' + $(this).attr("name") + '":"' + $(this).val() + '"';
　　　　　　　　}
　　　　　　})
　　　　});
  ParamJson = '{' + rules + '}';
  var postData = $("#grid-table").jqGrid("getGridParam", "postData");
  $.extend(postData, { Param: ParamJson });
  $("#grid-table").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{ page: 1}]); //重载JQGrid
　　});

搜索功能主要通过postData向服务器端传递数据。后端获取参数从而进行处理：