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

时间:2021-05-26

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章