jqGrid常用属性和方法介绍
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再获取行数据时需要循环遍历:
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数组
七、重新设置高度
var newHeight = $(window).height() - $(".gridPanel").offset().top - ;
$(".ui-jqgrid .ui-jqgrid-bdiv").css("cssText","height: "+newHeight+"px!important;");
jqGrid常用属性和方法介绍的更多相关文章
- SVG DOM常用属性和方法介绍(1)
12.2 SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...
- SVG DOM常用属性和方法介绍
将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...
- C# 常用控件属性及方法介绍
C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox ...
- 【转载】C#常用控件属性及方法介绍
C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文 ...
- UploadifyAPI-上传插件属性和方法介绍
上一篇文章简单的介绍了Uploadify上传插件的使用.但是对于常用的属性和方法并没有说明.授人以鱼不如授人以渔,我决定将常用的属性列举出来,供大伙参考参考. Uploadify属 ...
- HTML DOM对象的属性和方法介绍(原生JS方法)
HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...
- Node.js process 模块常用属性和方法
Node.js是常用的Javascript运行环境,本文和大家发分享的主要是Node.js中process 模块的常用属性和方法,希望通过本文的分享,对大家学习Node.js http://www.m ...
- ios基础篇(四)——UILabel的常用属性及方法
UILabel的常用属性及方法:1.text //设置和读取文本内容,默认为nil label.text = @”文本信息”; //设置内容 NSLog(@”%@”, label.text); //读 ...
- UITableView常用属性和方法 - 永不退缩的小白菜
UITableView常用属性和方法 - 永不退缩的小白菜 时间 2014-05-27 01:21:00 博客园精华区原文 http://www.cnblogs.com/zhaofucheng11 ...
随机推荐
- merge into issue
ORA-30926: unable to get a stable set of rows in the source tables 一.经检查,这个错误是由于数据来源表(即语句中,using后面的f ...
- PYQT设计无边框窗体
#UI.py,通过UI设计师制作后直接转换为UI.py脚本 # -*- coding: utf-8 -*-from PyQt4 import QtCore, QtGui try: _fromUt ...
- POJ 1654 Area 计算几何
#include<stdio.h> #include<string.h> #include<iostream> #include<math.h> usi ...
- JS对象与PHP对象的对比
一.对象的创建与访问 1.JS对象的创建与访问 //方式一(通过内置构造函数创建后添加属性) var obj = new Object(); obj.name = 'Lucy'; //通过点添加属性 ...
- 力特ZE398C驱动光盘-USB转RS232-支持Windows 10/Mac
这个工具是USB1.1的,相对来说比较老,一开始做小白鼠不知道买了USB1.1的,所以我不建议买这个,还有其它的型号,支持USB2.0和USB3.0,不过价格也相对来说比较贵,这个才30块钱左右. 关 ...
- SSM框架搭建问题
环境: 1.eclipse Kepler Service Release 2 2.jdk 1.8 64 3.maven 3.5 4.tomcat 8 问题:
- centos7 通过kvm+vnc 实现远程桌面虚拟化和创建windows、Linux虚拟机
感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限.错误之处在所难免,欢迎指正! 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...
- GlobalGetAtomName GlobalDeleteAtom 引用 WinAPI: AddAtom、DeleteAtom、FindAtom、GetAtomName、GlobalAddAtom、GlobalDeleteAtom、GlobalFindAtom、GlobalGetAtomName
http://www.cnblogs.com/del/archive/2008/02/28/1085124.html 这是储存字符串的一组 API.通过 AddAtom 储存一个字符串, 返回一个 I ...
- hibernate一级缓存,二级缓存和查询缓存
一级缓存 (必然存在) session里共享缓存,伴随session的生命周期存在和消亡: 1. load查询实体支持一级缓存 2. get查询实体对象也支持 3. save保存的实体对象会缓存 ...
- CLR基础,CLR运行过程,使用dos命令创建、编译、运行C#文件,查看IL代码
CLR是Common Language Runtime的缩写,是.NET程序集或可执行程序运行的一个虚拟环境.CLR用于管理托管代码,但是它本身是由非托管代码编写的,并不是一个包含了托管代码的程序集, ...