jqGrid中文文档之选项设置

jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式，也可以是对象(object)及数组（array）的形式配置。

jqGrid选项(Option)

调用jqGrid只需要执行以下代码:

jQuery("#grid_id").jqGrid(options);

options即jqGrid的选项设置，请参照以下表格。

属性 类型 描述 默认值
ajaxGridOptions object 此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。 empty
ajaxSelectOptions object 此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时， ajax的全局属性。 empty
altclass string 交替行的类。 此项仅当altRows设置为true时有效。 ui-priority-secondary
altRows boolean 设置为交替行表格 false
autoencode boolean 当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如< 将被转换为< false
autowidth boolean 当设置为true时，表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行，为了使表格在父元素宽度变化时也随之变化，可以使用setGridWidth方法 false
caption string 表格的标题。显示在Header上。若为空时将不会显示。 empty
cellLayout integer 该属性确定单元格的padding + border 宽度。通常不修改该属性，但若表格的CSS中改变了td元素，该属性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5 5
cellEdit boolean 是否允许单元格编辑。 false
cellsubmit string 确定单元格内容保存方式是remote还是clientArray 。 'remote'
cellurl string 单元格保存的url。 null
colModel array 描述列参数数组。这是表格最重要的部分，详见colModel API. null
colNames array[] 列名称数组。该名称将在Header中显示。名称以逗号分隔，数量应与colModel 数组数量相等 empty
data array 以数组的形式保存本地数据。 empty
datastr string 当datatype被设置为xmlstring或jsonstring时，为数据串。 null
datatype string 定义表格希望获得的数据的类型，有效值有：
Xml —xml数据
xmlstring—xml字符串
json—JSON数据
jsonstring—JSON字符串
local—客户端数据（数组）
javascript—javascript数据
function—函数返回数据
 		 xml
deselectAfterSort boolean 只适用于当datatype为local时。当一个排序被应用时取消当前选定行。 true
direction string 表格中的书写方向。“ltr”从左到右(缺省值)，“rtl”从右到左 ltr
editurl string 定义行内编辑地址URL null
emptyrecords string 当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。  
ExpandColClick boolean true时，点击展开行的文字，treeGrid展开或收拢 true
ExpandColumn string 指定用于张开treeGrid的列（名称来自colModel），未设置即用第一列。此项只有当treeGrid为true时有效. null
footerrow boolean 如果设置为true时，将生成一个表脚行，列数等于colModel false
forceFit boolean 如果设置为true，改变列宽，相邻列也将调整以适应整体表格，将不会出现水平滚动条。 false
gridstate string 表格的当前状态。有visible或hidden visible
gridview boolean 设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件 false
grouping boolean 是否设置表格组 false
height mixed 表格高度。可为数值、百分比或auto 150
hiddengrid boolean 如果设置为true，表格开始被隐藏，数据不被载入，只显示标题。当第一次点击显示/隐藏按钮显示表格，数据从服务器载入。 false
hidegrid boolean 是否允许显示/隐藏按钮可用。只有标题不为空时可用。 true
hoverrows boolean 表行是否有鼠标悬停效果 true
jsonReader array JSON数据结构数组  
lastpage integer 请求返回的总页数 0
lastsort integer 排序的列号（0开始） 0
loadonce boolean 设置为true时，表格只一次读取服务器数据（使用适当datatype），之后，datatype 自动变为local ，所有进一步操作都在客户端完成，pager功能（若存在）将失效。 false
loadtext string 数据请求和排序时显示的文本 Loading…
loadui string 此项控制ajax进程进行时的动作。Disable—取消jqGrid的进程指示，可使用自定义的指示。 enable (缺省)—表格中间显示loading。 block – 显示“Loading”信息，禁用页面上的所有功能，直到数据装入完成。 enable
mtype string 定义提交类型POST或GET GET
multikey string 此属性只有当multiselect为true时有效，定义多选时的组合键，可选值有： shiftKey ，altKey，ctrlKey empty
multiboxonly boolean 此属性只有当multiselect为true时有效，. Multiboxonly设置为true时，只有点击checkbox时该行才被选中，点击其他列，将清除当前行的选中。 false
multiselect boolean 此属性设为true时启用多行选择，出现复选框 false
multiselectWidth integer 若multiselect 为true时，定义多选列的宽度。 20
page integer 设置请求初始页的数量，此参数通过URL从服务器接受数据 1
pager mixed 定义分页浏览导航条。必须是一个HTML元素，如<div id="page"></div> empty
pagerpos string 定义表格浏览导航条的位置，缺省情况下建立一个包括3部分的导航条：页码，导航按钮和记录信息。 center
pgbuttons boolean 定义导航激活时导航按钮是否显示。 true
pginput boolean 定义导航栏是否有页码输入框。 true
pgtext string 当前页信息。第一个量为当前页，第二个量为总页数。  
prmNames array 缺省情况下prmNames: { page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 以POST方式发送到服务器，字段为： page，rows，sidx，sord，search，nd 例如要将sidx改为mysort，可写成： prmNames: {sort: “mysort”}. 这样提交到服务器的字符串就变为： page=1&rows=10&mysort=myindex&sord=asc 若将一些参数设为null，这些参数将不再发往服务器。例如prmNames: { nd:null} 则nd参数将不被发送。 Npage参数参见scroll option. none
postData array 此数组能直接传递到url。这个数组可使用这种形式{name1:value1…}。 empty
reccount integer 只读属性。定义表格显示的行数。切勿与records混淆。 0
recordpos string 定义页中记录信息的位置，可以是left，center，right。 right
recordpos object 交替行的类 true
records integer 只读属性。定义从请求中获得的记录数 none
recordtext string 可在页面上显示的提示信息，此文字只在viewrecords 为true是有效，并且当记录总数大于0时才显示。
此文字中{}中的内容表示：
{0} 该页显示的第一个记录的记录号
{1} 该页显示的最后一个记录的记录号
{2} 获得的记录总数		  
resizeclass string 列可变大小时的类 empty
rowList array[] 用于改变显示行数的下拉列表框的元素数组。 empty
rownumbers boolean 若此属性为true，表格左侧将添加一用于显示行数（从1开始）的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。 false
rowNum integer 表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意：若此参数设置为10，而服务器返回15条记录，将只有10条记录被装入。若此参数被设置为-1，则此检查失效 20
rownumWidth integer 当rownumbers为true时，定义显示行数的列的宽度。 25
savedRow array 只读属性。用于行编辑和单元格编辑保存数据之前 empty
scroll boolean or integer 创建动态滚动表格。当设为启用时，pager被禁用，可使用垂直滚动条来装入数据。 false
scrollOffset integer 定义垂直滚动条的宽度。 18
scrollrows boolean 该项启用时，用setSelection 选定一行，表格将滚动到被选行可见。 false
selarrrow array-[] 只读属性。当multiselect 为true时，包含当前选定的行。此为一维数组，值为表格中选定行的ID。 empty
selrow string 只读属性。内容是最后选定行的ID。如火应用了排序或pagging，该值为null。 null
shrinkToFit boolean or integer 该项描述计算每列相对于表格宽度的初始宽度的类型。
若为true，并且设置了列宽度，则每列的宽度根据定义宽度缩放。
若为false，并且设置了列宽度，表格宽度为设置宽度，列宽度不会重新计算，使用colModel中定义的值		 true
sortable object 启用此项，允许使用鼠标重新排序列。 true
sortname string 从服务器读取XML或JSON数据时初始的排序名，此名被加到URL中。 empty
sortorder string 从服务器读取XML或JSON数据时初始的排序类型，此类型被加到URL中。可选值为asc或desc。 asc
subGrid boolean 设置为true，可使用子表格。启用子表格，将在基本表的左边将添加一列，并包含一个“+”图像，用户可以点击扩展行。 false
subGridModel array-[] 该属性用于描述子表格的模式，只有subGrid 为true时有效。它是一个用于描述子表格列的数组。 empty
subGridType mixed 用于定义子表格装入的数据类型，若不定义，则使用与父表格同样的数据类型。 null
subGridUrl string 该属性用于定义子表格获得数据的URL。行的ID将键入此URL中，若要添加其他参数，可使用subGridModel 中的选项。 empty
subGridWidth integer 定义子表格的列宽 20
toolbar array 该参数定义表格的工具栏。参数是一个包含两个值的数组，第一个值使工具栏有效，第二个值相对位置（可以是top、bottom、both）。例如：设置toolbar为 [true,”both”]，将在表格的头部和底部建立两个工具栏，两个工具栏位两个DIV元素，头部DIV元素的ID为“t_表格ID”，底部DIV元素的ID为“tb_表格ID”。若只有一个工具栏（top或bottom）时，DIV的ID为“t_表格ID”。 [false,'']
toppager boolean 是否在表格上部显示分页条。 false
totaltime integer 只读参数。用于记录装入XML和JSON数据的时间。 0
treedatatype mixed 定义初始数据类型 null
treeGrid boolean 启用（禁用）TreeGrid。 false
treeGridModel string 定义TreeGrid的方法。可以是nested或adjacency。 nested
treeIcons array 此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}  
treeReader array 扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。  
tree_root_level numeric 确定treeGrid相对于根元素的级别。 0
url string 请求数据的url地址 null
userData array 此数组保存请求的自定义信息，可随时使用 empty
userDataOnFooter boolean 到为true时， userData直接放置在页脚。 false
viewrecords boolean 是否在浏览导航栏显示记录总数 false
viewsortcols array 定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]。
第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。
第二个参数设定排序图标如何放置。vertical为垂直放置，horizontal为水平放置。
第三个参数设定点击功能。True表示表头点击排序，false表示只点击排序图标排序。若将此参数设为false时，请确保第一个参数为true，否则将无法排序。		  
width number 若为设置，表格的宽度为colModel 中定义的所有列宽度的总和。若设置了该项，每列的初始宽度按照shrinkToFit 设置的值 none
xmlReader array 描述预期的XML数据结构的数组。

ColModel API

colModel属性以数组的形式定义各个表格列。这是jqGrid中很重要的部分。语法为：

jQuery("#gridid").jqGrid({
...
  colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
});

下面给大家介绍jqGrid提供的事件列表。

事件 参数 描述
afterInsertRow rowid 
rowdata 
rowelem		 此事件发生在每次插入行后
rowid 为插入的行ID
rowdata 是被插入行的数据数组。格式为name:value对，name在colModel定义
rowelem 是应答元素。xml为xml行，json为所有行数据。
注意：若gridview 为true，此事件不会发生
beforeRequest none 此事件发生在任何数据请求前，但当datatype为function时不发生。
beforeSelectRow rowid, e 此事件发生在用户点击行，选中该行前。
rowid 为行的ID，e为事件对象
该事件将返回布尔值true（行被选中）或false（行未被选中）。
gridComplete none 此事件发生在表格所有数据装入和进程完成后。与datatype参数及排序分页等无关。
loadBeforeSend xhr,
settings		 此事件发生在XMLHttpRequest被发送前，用于修改对象属性（如headers）。 xhr 为XMLHttpRequest对象。
loadComplete data 此事件发生在每个服务器请求后。xhr 为XMLHttpRequest对象。
loadError xhr,
status,
error		 此事件在请求失败时发生。事件有3个参数：
xhr 为XMLHttpRequest对象；
Satus 为错误类型描述；error 为错误对象。
onCellSelect rowid,
iCol, 
cellcontent,
e		 此事件在点击表格特定单元格时发生。
rowid 为行ID；iCol 为列索引；
cellcontent 为单元格中内容；
e 点击事件对象。
ondblClickRow rowid, 
iRow, 
iCol, 
e		 此事件发生在行双击后发生。
rowid为行ID；iRow 为行索引（勿与rowid混淆）；
iCol为列索引；
e 为事件对象。
onHeaderClick gridstate 此事件发生在点击显示或隐藏表格后发生（hidegrid为true） gridstate为表格状态，有visible和hidden两个值
onPaging pgButton 此事件发生在点击page button后，填充数据前，及用户输入一个与当前页页码不同的新页码并回车时。
onRightClickRow rowid, 
iRow, 
iCol, 
e		 此事件发生在右击行后。（此事件在Opera浏览器中无效）
rowid为行ID；iRow为行索引（勿与rowid混淆）
iCol为列索引；
e为事件对象
onSelectAll aRowids,
status		 此事件发生在点击标题的复选框时发生（multiselect为true）
aRowids 选定行ID的数组（哪些行的复选框与头复选框相同）
status 头复选框的选定的布尔值，true为选中，false为
onSelectRow rowid,
status		 此事件发生在行点击后
rowid 为行ID；
status  为选择状态。当multiselect为true时使用，当行被选中时返回true；为选中时返回false。
onSortCol index,
iCol,
sortorder		 此事件发生在列排序被点击之后，数据排序前
index 为colModel 中定义的索引名iCol 为列的索引号
sortorder 为新的排序方式，asc或desc
resizeStart event, index 此事件发生在列被重新定义宽度时。 event 为事件对象；index 为在colModel 中定义的列索引。
resizeStop newwidth, index 此事件发生在列被重新定义宽度后。
newwidth 为新的列宽度；index 为在colModel 中定义的列索引。
serializeGridData postData 通过此事件可以序列化传递给ajax请求的的数据。此事件将返回一个以序列化的数据。若有自定义的数据（如JSON字符串、XML字符串）要发给服务器时，可使用该事件。
赞 (0)

相关推荐

  • JQGrid的用法解析(列编辑,添加行,删除行)

    JQGrid的用法解析(列编辑,添加行,删除行)

    复制代码 代码如下: <script> $(document).ready(function(){ initPlsfList();});//初始化grid列表function initPlsfList(){ //缓存表列数组,key 为页面元素的name ,value 对应数据库中的字段 var cellArray = new Array(); cellArray["zoneID"] ="ZONE_ID";  cellArray["factor

  • Java中jqGrid 学习笔记整理——进阶篇(二)

    Java中jqGrid 学习笔记整理——进阶篇(二)

    相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

  • jqGrid表格应用之新增与删除数据附源码下载

    jqGrid表格应用之新增与删除数据附源码下载

    jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用. 下面给大家展示了效果图,喜欢的朋友可以直接下载源码哦. 效果展示    源码下载 在上一篇文章中,我们提到过jqGrid自身有强大的单元格操作模块,但是这些模块操作起来不太适合用户的习惯,在本文中,我们使用fancybox,以及表单插件来完成jqGrid数据的添加以及删除操作. XHTML 首先需要在he

  • jqGrid用法汇总(全经典)

    jqGrid用法汇总(全经典)

    支持多种类型的数据集合作为数据源 jqGrid可以绑定三种类型的数据:XML,JSON和数组.使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组) $("#grid1").jqgrid( ........ datatype: "xml", ........ ); 下面则列举各种数据类型的格式 XML格式: <rows> <page></page> <total>

  • jqGrid随窗口大小变化自适应大小的示例代码

    第一种: jqGrid随窗口大小变化自适应宽度 复制代码 代码如下: $(function(){            $(window).resize(function(){            $("#listId").setGridWidth($(window).width());        });       }); 第二种: 复制代码 代码如下: window.onresize = function  _doResize() {  var ss = pageSize()

  • jqGrid 学习笔记整理——进阶篇(一 )

    jqGrid 学习笔记整理——进阶篇(一 )

    在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

  • Jqgrid设置全选(选择)及获取选择行的值示例代码

    1.添加multiselect: true 2.获取选择行的值 复制代码 代码如下: var rowData = jQuery('#List').jqGrid('getGridParam','selarrrow');    if(rowData.length)     {        for(var i=0;i<rowData.length;i++)        {           var name= jQuery('#List').jqGrid('getCell',rowData[i]

  • 通过点击jqgrid表格弹出需要的表格数据

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及删除资料等功能. 自定义的工具列 预设的Navigator工具列,可以很容易的使用新增.删除.编辑.检视及搜寻等功能. 完整的分页功能 按下任一栏位的标头,皆可以该栏位为排序项目.无论是升序或降序皆可. 预设的action formatter,可以快速而直觉地对每笔资料做运算. 支持多种数据格式.比如json.xm

  • 基于PHP和Mysql相结合使用jqGrid读取数据并显示

    基于PHP和Mysql相结合使用jqGrid读取数据并显示

    jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程. 下面给大家展示效果图,喜欢的朋友可以阅读全文哦. jqGrid本身带有search和edit表格模块,但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成相关功能,符合项目的实际应用. XHTML

  • jqGrid读取选择的多行的某个属性代码

    复制代码 代码如下: var selrow =articleTable.getGridParam('selarrrow');//获取多行的id var columnCodes=[];//初始化一个数组 $(selrow).each(function (index, yu) {//遍历每个id 找到每个data 并把属性加到初始化数组里 var rowData = articleTable.jqGrid("getRowData", yu); columnCodes.push(rowDat

  • Bootstrap嵌入jqGrid，使你的table牛逼起来

    Bootstrap嵌入jqGrid，使你的table牛逼起来

    Bootstrap原生的table组件只能满足简单的数据展示,满足不了更富有操作性的要求.当然了,你可以找到一款叫做"DataTables-1.10.11"的基于bootstrap的table组件,但如果你对API看得不甚了解的话,用起来可就痛苦了,但是如果你选择使用jqGrid,那么本篇教程就给你带来了解决这种富操作性table的解决方案. 一.效果展示 OK,就展示这一张图片,相信你已经爱上了bootstrap版的jqGrid,和bootstrap很兼容,简直完美,当然了,这需要我

  • jqgrid 编辑添加功能详细解析

    ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 用法: Java代码 : 复制代码 代码如下: jQuery("#gridid").jqGrid({   ...      colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],   ..   }); 属性  数据类型  备注  默认值  align  string  定义单元格对齐方式:可选值:left, center, right.  left 

  • Jqgrid之强大的表格插件应用

    Jqgrid之强大的表格插件应用

    jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合. jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数

随机推荐