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

<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

　　<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script>
　　<script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script>
　　<script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>

var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");

onSelectRow: function (rowid, status) {
　　　　selId = rowid;　　//给最外层的selId赋值
　　}

var ids=$('#gridTable').jqGrid('getGridParam','selarrrow');

var ids = $("jqgridtableid").jqGrid('getDataIDs');

var rowData = $('#gridTable').jqGrid('getRowData',rowId);

var Name= rowData.name;

var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);

　　//设定选中行,可设定多行选中：
　　$("jqgridtableid").jqGrid('setSelection',id1);
　　$("jqgridtableid").jqGrid('setSelection',id2);

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

/// <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));
  }
 }

$("#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
　　});

Dictionary<string, string> DicParam = new Dictionary<string, string>();
　　string Param = Convert.ToString(Request["Param"]);
　　if (!string.IsNullOrEmpty(Param))
　　{
　　　　System.Web.Script.Serialization.JavaScriptSerializer sr = new System.Web.Script.Serialization.JavaScriptSerializer();
　　　　DicParam = sr.Deserialize(Param, typeof(Dictionary<string, string>)) as Dictionary<string, string>;
　　}

cellLayout:0

.ui-jqgrid .ui-jqgrid-bdiv{ overflow-x: hidden; }

 $(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-x': 'hidden' });

name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
 　　　　formatter: 'actions',
 　　　　formatoptions: {
 　　　　keys: true,
 　　　　delbutton:false,
 　　　　delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
 　　　　formatter:"actionFormatter"
 　　},

 $.extend($.fn.fmatter, {
  actionFormatter: function(cellvalue, options, rowObject) {
   var retVal = "显示在原来编辑按钮的按个地方的代码";
   return retVal;
  }
 } );