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

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

一、要引用的文件

要使用jqGrid，首先页面上要引入如下css与js文件。

1、css

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

2、js

　　<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>

二、使用要点说明

1、获取值

（1）、获取单个id

获取行号，有这种方式：

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

但是经过实际验证，这种方式不可行，当选中行，再点击同一行会出现获取不到行号的情况。

最后先在js最外部定义一个变量selId，然后使用如下代码在选中行时赋值：

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

（2）、获取多个选中行的id

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

其输出格式是逗号分隔的id，如：

1,2,3,4,5

（3）、获得所有行的ID数组

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

（4）、获取行数据

如果想获取选择的行的数据，只要传入rowId即可，如下：

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

而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：

var Name= rowData.name;

（5）、获取单元格数据

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

（6）、设定行选中

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

2、自定义分页、数据交互

何谓自定义？就是允许你用你自己喜欢的js对象与后端做数据交互。如jsonReader。

如果这个地方的Id设置错了，那么jqGrid就会自动以行号作为Id，这样会影响删除的。如果根据Id来删，很有可能删错行。

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向服务器端传递数据。后端获取参数从而进行处理：

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

这样就获取到了查询参数的键值对，至于参数怎么用，一般都是用于sql的where子句。

三、更多jqGrid配置属性说明

1、属性

2、事件

3、方法

四、问题记录

1、IE9下jQgrid一直出现水平滚动条的问题。

解决：是因为jqGrid会在IE下出现border与padding造成宽度过大引起的，增加此属性可解决：

cellLayout:0

此时当页面缩放摆100%时，已经不显示滚动条，但是缩放比例不为100%时，依然会显示水平滚动条，终极解决方案为更改ui.jqgrid.css样式：

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

如果还是不行，还有一个方法：

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

当然你也可以直接修改样式.ui-jqgrid-bdiv增加overflow-x:hidden;

2、自定义操作列。

jqGrid默认的自定义编辑列，只能设置编辑按钮与删除按钮。并且图标基本上都很难控制，如果想自己实现自己的自定义编辑列，可以如下操作:

在actions列的formatoptions项，增加此行：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。