jqGrid API中文手册:http://blog.mn886.net/jqGrid/

一、jqGrid属性:

width:
Grid的宽度,如果未设置,则宽度应为所有列宽的之和;如果设置了宽度,则每列的宽度将会根据shrinkToFit选项的设置,进行设置。

height :

Grid的高度,可以接受数字、%值、auto,默认值为150。
shrinkToFit:
此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值,则每列宽度会根据width成比例缩放;如果shrinkToFit为false且设置了width值,则每列的宽度不会成比例缩放,而是保持原有设置,而Grid将会有水平滚动条。  
autowidth
默认值为false。如果设为true,则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段;如果当父容器尺寸变化了,同时也需要变化Grid的尺寸的话,则需要在自己的代码中调用setGridWidth方法来完成。

  这些属性只能是保证第一次时的宽度,当浏览器大小变化如还想让表格宽度自适应,就需要用jqgrid的方法setGridWidth,它有两个参数:new_width、shr,当第二个参数不设置时会按照shrinkToFit的设置值或默认值,而第一个参数则要设置的新的宽度值,所以可用js实现对浏览器宽度变化的自适应:  

$(function(){  
$(window).resize(function(){  
$("#analyDataTab").setGridWidth($(window).width()*0.99);
$("#charDataTab").setGridWidth(document.body.clientWidth*0.99); 
});  
});

注:这里的百分比可按自己需要来设定,也可直接是浏览器的宽度大小。

rownumWidth:控制序号栏的宽度

rownumbers: true,//序号栏是否显示
rownumWidth: ,//序号栏宽度

viewrecords: true,是否显示总记录数

 rowNum:是jqgrid分页时每页记录数,默认是20;如果设置rownum设置为10,不管后台返回记录数是多少,最多只显示10条。如果设置为-1,则显示后台返回的所有记录。

二、jqGrid保持显示垂直滚动条

在IE中记录比较少的时候,默认情况下不显示垂直滚动条,会出现标题行与数据行位置对不齐的情况,通过保持显示垂直滚动条可以解决这个问题。

$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

需要保持水平滚动条,则:

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

三、动态显示隐藏某一列

$("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid");
$("#grid_id").setGridParam().hideCol("colname").trigger("reloadGrid");

三、常用方法:

$("#gridTable").jqGrid("getGridParam","selrow");//获取选中行的id
$.currentIframe().$("#gridTable").jqGrid("getRowData","4028f65d5d1bb627015d1c297ecf0006");//根据选中的行的id获取选中行的数据
//取消所有选中的行:
$("jqgridtableid").trigger("reloadGrid");
//设定选中行,可设定多行选中:
$("jqgridtableid").jqGrid('setSelection',id1);
//获得选中行的ID数组:
var ids = $("jqgridtableid").jqGrid('getGridParam','selarrrow');
//获得某单元格的数据:
var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);
//获得所有行的ID数组:
var ids = $("jqgridtableid").jqGrid('getDataIDs');

下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id:

var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);

如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下:

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

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

var rowData = $(“#gridTable”).jqGrid(‘getRowData’,rowId);

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

var rowName=rowData.name;

当然你这个对象得有name这个属性才行。

四、标题栏的checkbox,全选全不选

当在JqGrid表格属性中设置了 multiselect:true,这时会在每一行前面出现checkbox

而在点击栏的checkbox时,表格全选或全部选,这时触发的事件是onSelectAll。

onSelectAll:function(rowids,statue){

                       //函数里做自己的处理
                };
   rowids:表示表格的所有行Id,即设置了key=true的那一列的值,如果设置了多列的                     key=true,那么只选取第一个
   statue:true/false,如果全选则为true,全不选则为false

全选的时候需要注意的是,rowids是个数组,当从id再获取行数据时需要循环遍历:

onSelectAll:function (rowid,status) {
if (status) {
for(var i=,l=rowid.length;i<l;i++){
getCheckedId(rowid[i]);
}
} else {
for(var i=,l=rowid.length;i<l;i++){
unCheckedId(rowid);
}
}
},
var rowsObj = {},
rowsId = [];
function getCheckedId(id) {
rowsId.push(id);
rowsObj[id] = $("#gridTable").getRowData(id);
} function unCheckedId(id) {
removeRowId(id,rowsId);
rowsObj[id] = null;
}

 五、前端分页:

pager: "#gridPager",
rowNum:,
rowList: [,,],
loadonce:true,//关键所在

六、获取id数组

$("#gridTable").jqGrid('getDataIDs');//获取所有行的id数组

$("#gridTable").jqGrid('getGridParam','selarrrow');//获取所有选中行的id数组

七、重新设置高度

  设置height和setGridHeight都是无效的。原因是因为css的height样式覆盖了设置的height样式。
  正确的应该是再次强制important(优先权):

var newHeight = $(window).height() - $(".gridPanel").offset().top - ;
$(".ui-jqgrid .ui-jqgrid-bdiv").css("cssText","height: "+newHeight+"px!important;");
 

jqGrid常用属性和方法介绍的更多相关文章

  1. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  2. SVG DOM常用属性和方法介绍

    将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...

  3. C# 常用控件属性及方法介绍

      C#常用控件属性及方法介绍                                               目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox ...

  4. 【转载】C#常用控件属性及方法介绍

    C#常用控件属性及方法介绍                                               目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文 ...

  5. UploadifyAPI-上传插件属性和方法介绍

    上一篇文章简单的介绍了Uploadify上传插件的使用.但是对于常用的属性和方法并没有说明.授人以鱼不如授人以渔,我决定将常用的属性列举出来,供大伙参考参考.           Uploadify属 ...

  6. HTML DOM对象的属性和方法介绍(原生JS方法)

    HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...

  7. Node.js process 模块常用属性和方法

    Node.js是常用的Javascript运行环境,本文和大家发分享的主要是Node.js中process 模块的常用属性和方法,希望通过本文的分享,对大家学习Node.js http://www.m ...

  8. ios基础篇(四)——UILabel的常用属性及方法

    UILabel的常用属性及方法:1.text //设置和读取文本内容,默认为nil label.text = @”文本信息”; //设置内容 NSLog(@”%@”, label.text); //读 ...

  9. UITableView常用属性和方法 - 永不退缩的小白菜

    UITableView常用属性和方法 - 永不退缩的小白菜 时间 2014-05-27 01:21:00  博客园精华区原文  http://www.cnblogs.com/zhaofucheng11 ...

随机推荐

  1. win10怎么修改svn的用户和密码

    win10怎么修改svn的用户和密码(一般为默认),其他的系统也差不多 方法/步骤 1.方法一: 1.双击我的电脑在c盘找到auth文件夹 C:\Users\系统帐户名\AppData\Roaming ...

  2. leetcode 奇偶链表 python

    要求空间复杂度O(1) 那就只能用指针不断改链表的指针, 不能建立新的内存 时间复杂度O(1) 一遍遍历 不能嵌套循环 我的思想是: 1 如果链表元素数量小于等于2个,那就无法操作 2 能操作的情况下 ...

  3. type="submit"表单提交理解

    1.默认为form提交表单 . button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情.当然,button也可以完成表单提交的工作. 2.method=" ...

  4. android viewStub

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 开发应用的时候,需要根据条件决定显示某个视图, 这个时候可以用ViewStub Stub ...

  5. 【51Nod 1222】最小公倍数计数

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1222 求\([a,b]\)中的个数转化为求\([1,b]\)中的个数减去 ...

  6. Contest Reviews(Updating)

    现在每天至少一套题又不太想写题解…… 那就开个坑总结下每场的失误和特定题目的技巧吧 2018.8.25[ZROI] T3传送门 T1:找规律找崩了…… 最好不要一上来就钻进大讨论,先想有没有普适规律 ...

  7. BZOJ.3611.[HEOI2014]大工程(虚树 树形DP)

    题目链接 要求的和.最大值.最小值好像都可以通过O(n)的树形DP做,总询问点数<=2n. 于是建虚树就可以了.具体DP见DP()函数,维护三个值sum[],mx[],mn[]. sum[]要开 ...

  8. python 爬虫学习<将某一页的所有图片下载下来>

    在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材. 我们最常规的做法就是通过鼠标右键,选择另存为.但有些图片鼠标右键的 ...

  9. jmeter用BeanShell调用jar包对HTTP请求中的参数进行MD5加密

    前提: eclipse.JDK.Jmeter 说明: 本文分为两部分进行配置说明 第一部分:编写JavaMD5加密脚本 第二部分:使用Jmeter的BeanShell进行验证 ************ ...

  10. 使用Layui和Vue实现分页

    原理就是利用Layui的分页组件和Vue组件的模板渲染功能. 我下面直接贴代码,比较直观. index.html <!DOCTYPE html> <html> <head ...