时间: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来删,很有可能删错行。
这样一来,对于数据表格,在C#中,我可以用一个泛型类,就能够与jqGrid表格进行交互(其中,包括了分页信息,数据内容)。
3、搜索的实现
搜索的实现主要通过jqGrid的postData像服务器端传递参数。
搜索功能主要通过postData向服务器端传递数据。后端获取参数从而进行处理:
当然你也可以直接修改样式.ui-jqgrid-bdiv增加overflow-x:hidden;
2、自定义操作列。
jqGrid默认的自定义编辑列,只能设置编辑按钮与删除按钮。并且图标基本上都很难控制,如果想自己实现自己的自定义编辑列,可以如下操作:
在actions列的formatoptions项,增加此行:
然后在页面开始处增加如下代码:
$.extend($.fn.fmatter, { actionFormatter: function(cellvalue, options, rowObject) { var retVal = "显示在原来编辑按钮的按个地方的代码"; return retVal; } } );以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好
在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法。分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页。在今天这篇文章中,我们学习如
前言:之前写个一个jQuery的分页显示插件,存在许多的bug,现在由于业务需要,学习的一点AngularJS,重新用angularjs实现了这个分页插件实现效
相关阅读:Java中jqGrid学习笔记整理——进阶篇(一)本篇开始正式与后台(java语言)进行数据交互,使用的平台为JDK:java1.8.0_71myEc
本文实例讲述了jQuery实现带有洗牌效果的动画分页。分享给大家供大家参考。具体如下:这款jquery分页示例载入的是一个图片的LI列表,使用jQuery技术将