`
jean7155
  • 浏览: 61252 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

jqGrid的使用笔记：2. 基本的Grid

jqueryjavascriptajax 
阅读更多
基本的方法
jQuery("#grid_id").jqGrid(options); 
<html>
....
<body>
...
<table id="grid_id"></table>
...
</body>
<html>


options
1. 关于国际化配置
jqGrid的语言文件配置是一个基本文件。 这个文件在HTML文件中应用（<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>）， 默认配置了表格中的某些默认语言的显示。 如果需要改成中文， 则调用以上路径的grid.locale-cn.js文件。

2. 其它属性
属性类型描述默认值可修改？
ajaxGridOptionsobject可设置grid请求数据的ajax设置。可能修改包含error, complete, beforeSend事件的现有配置。empty objectY
ajaxSelectOptionsobjectThis option allows to set global ajax settings for the select element when the select is obtained via dataUrl option in editoptions or searchoptions objectsempty objectY
altclassstring为grid中的斑马行配置不同的样式。 可以创建自定义样式并替换改值。 这个选项必须在altRows=true的情况下使用。ui-priority-secondaryYes. 刷新
altRowsboolean是否使用斑马线 falseYes.刷新
autoencodeboolean如果设置为true，则将server端传来的信息加密并修改模型后提交数据。 比如： < => &lt;.falseYes
autowidthboolean设置为true, grid宽度根据父元素的宽度自动调整。 只有当grid创建时才被使用。 当父元素改变宽度时，需要使用setGridWidth方法重新调整grid。falseNo
captionstringGrid的标题。 为空时不显示标题。empty stringNo.Method avail.
cellLayoutinteger决定每个表单元格padding + border的宽度。起始数据 5表明： paddingLef(2) + paddingRight (2) + borderLeft (1) = 55N
cellEditboolean是否允许单元格编辑false Yes
cellsubmitstring单元格内容保存'remote'Yes
cellurlstring单元格保存的 urlnullYes
cmTemplateobject配置一套属性去覆盖colModel中的默认值.null No
colModelarray列举列属性。empty array No
colNamesarray列名称,需和colModal的列数码匹配。empty array[]No
dataarray存储数据。empty arrayYes
datastrstring字符型数据，当datatype=xmlstring / jsonstring.nullYes
datatypestring数据类型。1) xml ,2) xmlstring , 3)json, 4)jsonstring , 5) local (客户端的 array data), 6) javascript ,7) function xmlYes
deepemptyboolean当事件或插件从属于单元格时，设置为true. The option uses jQuery empty for the the row and all its children elements. This of course has speed overhead, but prevents memory leaks. This option should be set to true if a sortable rows and/or columns are activated.falseYes
deselectAfterSortbooleandatatype=local时使用.trueYes
directionstring表中文字的方向. 默认是ltr (Left To Right). 这个属性目前只适用于Firefox 3.x 和 IE>=6. Safari, Google Chrome和 Opera不能完全支持rtl.ltrNo
editurlstringDefines the url for inline and form editing. May be set to clientArray to manually post data to server, see Inline Editing.nullYes
emptyrecordsstring当表内记录为空时显示。viewrecords=true时有用。see lang fileYes
ExpandColClickboolean设置为true时，点击单元格会出现树形结构的grid. trueNo
ExpandColumnstring设置colModel的哪个列可出现树形grid。 默认是第一列可显示。 treeGrid=true是可用。null No
footerrowboolean设置为true时，表和pager之间会出现footer表，列和colModel中的列数目一致。falseNo
forceFitboolean设为true时,当一个列的宽度变化时，右边相邻的列会重新调整列宽以使表不出现水平滚动条。这个配置项和shrinkToFit不能兼容使用。i.e if shrinkToFit false时, forceFit忽略不计.falseNo
gridstatestring2种状态: 可见 / 不可见visibleNo
gridviewboolean历史版本的jqGrid，包括3.4.X,在加载大数量数据时 (行数>= 100 )会导致速度问题。现在的版本已解决了这个问题。如果设为true,可以立刻提速5-10倍。 但是同时不能使用treeGrid, subGrid,或afterInsertRow事件.falseYes
groupingboolean分组falseYes
headertitlesboolean 设为 true时，会出现列标题。falseNo
heightmixed可设 number (pixels) or % (only 100% is acceped) 或 auto(这个参数我设置为：auto,或者%时，会报错。 为什么了？？)150No.Method avail.
hiddengridboolean设为true时起始时grid是隐藏的. 只显示标题，不显示数据。只有点击显示/隐藏按钮来交替显示或隐藏grid. 当然，此时标题需要有文字显示。false No
hidegridboolean标题栏右面显示/隐藏按钮是否显示。标题栏需要有文字显示trueNo
hoverrowsboolean设为false时，鼠标滑过grid数据行的功能不可用。trueYes
idPrefixstring数据加载时， string作为ID前缀emptyYes
ignoreCaseboolean默认的本地查询时区别大小写的。falseYes
inlineDataempty object当单元格内可编辑数据时，可将增加内容的数据提交给服务端{}Yes
jsonReaderarray描述json数据的结构。No
lastpageinteger总页数。可使用以下方法设置：your_grid.setGridParam({lastpage: your_number})0No
lastsortinteger从0开始，最后排序的列数的索引。0No
loadonceboolean设为true时, 服务端之提供一次数据并转换为local数据类型。以后的数据加载使用这个local数据类型.此时，pager的函数都不可用。falseNo
loadtextstring加载和排序数据时的文字显示。 在国际化文件中设置。Loading…No
loaduistringajax操作过程中显示选项disable - 不使用jqGrid的操作进行中提示。 可使用自定义的提示。enable (default) - 在中央显示默认的操作提示 (default value is Loading…) . block - 显示loadtext属性中设置的操作提示， 并锁定所有的grid操作，直至ajax操作完成。 这个操作会使paging, sorting，工具栏上的所有操作都不可用。enableYes
mtypestringPOST” 或 “GET”GETYes
multikeystring当multiselect=true时才可使用. 配置多选时可用的键：shiftKey， Alt Key, ctrlKeyempty stringYes
multiboxonlyboolean当multiselect=true时.点击行的任何位置都可选定该行， 当multiboxonly=true同时成立时, 只有checkbox选择后行多行才可被选定，点击行的任何位置（checkbox未选），只有该行被选定，其它行不被选。falseYes
multiselectboolean多行选定功能是否可用。左边出现新的一列，其中是checkbox选择按钮。falseNo. see HOWTO
multiselectWidthinteger多选功能启用后，checkbox列的列宽20No
pageinteger页码。可作为参数传递给服务端获取相应数据。1Yes
pagermixed使用pager的按键组来导航数据。必须是有效的HTML元素。 比如：<div id=pager>.另外，导航栏可以放在表的任何位置。有效的设置可以是：pager, #pager, jQuery('#pager'). 个人推荐使用#pager. See Pager empty string.No
pagerposstringpager的位置。 默认情况下pager创建3个部分：pager，导航按钮，h和一个记录的信息。centerNo
pgbuttonsboolean配置pager后，pager按钮是否显示。trueNo
pginputboolean是否需要输入页码。trueNo
pgtextstring显示当前页，先显示当前页，再显示总页数。See lang fileYes
prmNamesarray默认信息： {page:“page”,rows:“rows”, sort:“sidx”, order:“sord”, search:“_search”, nd:“nd”, id:“id”, oper:“oper”, editoper:“edit”, addoper:“add”, deloper:“del”, subgridid:“id”, npage:null, totalrows:“totalrows”} 以上配置了向服务端post请求时需要发送的字段。例如，如果如下配置：{sort: “mysort”}. 发送到服务端的URL:myurl.php?page=1&rows=10&mysort=myindex&sord=asc. 当某些参数是null时，则不发送到服务端。例如 {nd:null}， 改参数不会发送。参数默认值： page: 请求的页数 (default value page) rows: 请求的行数 (default value rows) sort: 排序的列 (default value sidx) order: 排序的次序 (default value sord) search: 搜索 (default value _search) nd: 请求传递的时间 (forIE浏览器不缓存请求) (default value nd) id: 修改模型的ID名称(default value id) oper: 操作参数(default value oper)editoper: 修改模式下数据提交时的操作名称(default value edit) addoper: 添加模式下数据提交时的操作名称(default value add) deloper: 删除模式下数据提交时的操作名称(default value del) totalrows: 服务端获取的所有行数 - see rowTotal (default value totalrows) subgridid: 当点击subgrid加载的数据时的名称。 (default value id)noneYes
postDataarray url后附加的数组。使用如下：{name1:value1…}.empty arrayYes
reccountinteger 只读属性. grid下具体的行数。不要和records参数混淆。例如：rowNum=15, 但服务端返回了20行数字，则records=20, 但 reccount=15 (grid 显示 15行数字，不是20行).0No
recordposstringpager里的记录信息：left, center, right.rightNo
recordsinteger 只读属性，从服务端返回的记录数。noneNo
recordtextstring pager里显示的文字. viewrecords=true时被激活.当记录总数>0时显示。配置方法：{0} - 记录的起始位置，根据页数和返回记录数决定{1} - 终止位置 {2} - 从服务端返回的记录数see lang fileYes
resizeclassstring Assigns a class to columns that are resizable so that we can show a resize handle only for ones that are resizable.empty stringNo
rowListarray[]pager中的一个可选框，显示每页显示的数据行数。如果为空，则不显示这个选择框。一般设置为：[10,20,30]empty arrrayNo
rownumbersboolean设置为true时，最左边出现一行新的列，显示行数，从1开始。此时colModel自动添加一个新元素：rn. 注意:colModel中不能出现rn.falseNo
rowNumintegergrid中需要查看多少数据。作为url的参数去服务端查询数据。备注：如果这个参数设为10，服务端返回了15条记录，则grid只显示10条。如果设为-1，则这个功能不启用。20Yes
rowTotal integer确定从服务端需要返回的记录数。备注：rowNum设定grid需要显示的总记录数，rowTotal设定我们可以操作的记录数。nullYes
rownumWidthinteger当rownumbers=true,此参数设定数字列的宽度。25No
savedRowarray 只读属性，在修改行或单元格前，保存行或单元格内的数据。empty arrayNo
searchdataarray {}包含搜索的数据，存在形式：name:value.empty array{}Yes
scrollboolean or integer创建动态的滚动grid. 如果这项功能启动，pager功能则消失， 可以使用竖直滚动条加载数据。如果滚动系数设置为integer值（1）， grid只显示可见的数据。 这样，数据加载可不考虑内存溢出。 另外，服务端可加一个选项：npage(prmNames array). 如果设置了这个参数，grid会请求更多页的数据。 falseNo
scrollOffsetinteger设定水平滚动条的宽度。18No.Method avail.
scrollTimeoutinteger (milliseconds)当scroll=1时，此参数控制超时的操作。200Yes
scrollrowsboolean如果设置为true,在滚动时使用setSelection以选择一行时，被选定的行可见。 falseYes
selarrrowarray只读属性，当multiselect=true时，提交目前被选的行。是一个一维数组。empty array []No
selrowstring只读属性。 包含了最末被选行的ID。 当使用分页功能的时候，这个选项设为null. nullNo
shrinkToFitboolean or integer定义列宽度和grid的整体宽度是否需要重新计算。如果true,且列宽已设定，那每列按照平均列宽显示。例如，我们定义2列的列宽分别是：80和120pixels, 但grid的宽度是300 pixels,那么列宽需要根据整个grid的宽度调整，根据重新计算的结果：第一列的列宽是(300(new width)/200(sum of all widths))*80(first column width) = 120 pixels, 第二列是(300(new width)/200(sum of all widths))*120(second column width) = 180 pixels.如果设为false,就不进行以上列宽的重新调整。如果设置为integer,则列宽根据这个数值调整。trueNo
sortableboolean设为true时，当鼠标拖曳列时，grid重新排序。 这个功能是在jQuery UI sortable widget基础上实现的，因此要确保html中加载了这个widget. 备注：colModel中也有sortable的属性falseNo
sortnamestring当加载服务端返回的数据时，根据设定的列进行排序。（排序数据类型是xml或jason的数据）。这个参数可以添加在url后。 如果以设定的某列排序，该列的表头会出现顺序倒序的排序标志。empty stringYes
sortorderstring加载服务端返回的xml或json数据时，加载的数据根据设定进行顺序或倒序排列。这个参数可以添加在请求的url后。有两个值：asc or desc.ascYes
subGridboolean如果设定为true,可使用sub-grid.当subGrid被启动，则最左边的列前出现新的列，并包含+图片，可点击该图片扩展数据。falseNo
subGridOptions object subgrid的属性。 see Subgrid Yes
subGridModelarray-[]subgrid的模型对象，描述subgrid的列。subGrid=true时有效。empty arrayNo
subGridTypemixed允许subgrid以服务的形式加载。如果这个参数不设置，则使用父grid的默认数据类型。nullYes
subGridUrlstringsubGrid=true时有效.subgrid获取数据请求的url设置，将行的id作为参数请求subgrid的数据。empty stringYes
subGridWidthinteger subgrid=tue时，subgrid列宽设置。20No
toolbararray设置工具栏。该参数有2个元素：1） 启动工具栏，2）根据body层（表数据）来定义工具栏的相对位置。一般是：top, bottom. 比如：toolbar: [true,”both”]， 则出现2个工具栏，分别在数据栏上下。2个数据栏应该有2个div元素， 上面的id命名是t_+grid的id，下面的id命名是“tb_” + grid的id.[false, '']No
toppagerboolean设定一个分页元素，在标题栏下，数据栏上。命名为： grid_id + “_toppager”.falseNo
totaltimeinteger只读属性。当加载xml和json数据时，计算加载数据的时间。0No
treedatatypemixed设定初始数据类型。一般设置后便不可改变。nullNo
treeGridboolean 设定是否使用tree grid format.falseNo
treeGridModelstring设定treeGrid的方法，值：nested or adjacencynestedNo
treeIconsarray设置了tree grid中使用的图片。The default values are: {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}No
treeReaderarray基本的grid的colModel延伸定义No
tree_root_levelnumeric 当使用treeGrid时，根元素定义。0No
urlstring提交url给服务端以获得请求的数据。nullYes
userDataarray包含请求的客户信息。empty arrayNo
userDataOnFooterboolean设为true时，将用户数据放在footer中。如果用户数据中包含colModel中的任何数据，则在列中显示该数据。falseYes
viewrecordsboolean如果是true, jqGrid显示从头到尾的记录数字。显示在pager栏内：: “View X to Y out of Z”. falseNo
viewsortcolsarray设置的目的是为了查看排序（向上/向下箭头）的不同表现。[false,'vertical',true]. 第一个参数：所有具有排序属性的列是否可见排序按钮。如果是true, 则都可见，如果是false,则只有最后排序的列可见排序按钮。 第二个参数：图片怎么放置。竖向还是横向。第三个参数：点击函数。如果是true,则用户点击列标题的任何地方，都引起排序。 如果false,则只有点击排序按钮才发生排序。重要点：如果第三个设为false, 第一个参数一定要true,否则用户无法找到可点击的排序按钮。[false,'vertical',true] No
widthnumber如果不设置，则所有列的宽度总数=grid的宽度。如果设置，每个列的初始宽度根据shrinkToFit选项定义的调整。noneNo. Method avail.
xmlReaderarrayxml数据类型描述。no


设置全局选项
当某些设置需要运用在所有的grid上时，可采用extend函数来配置。
例如：如果要设置一个斑马行数据，并且所有的grid都要使用这个设置。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
 
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
// 全局设置：Here we set the altRows option globally
jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>
 
<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
...


覆盖全局设置 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
 
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
// 全局设置：Here we set the altRows option globallly
jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>
 
<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    // 覆盖全局：here we do not want zebra for this grid
    altRows: false,
...
分享到：
| jqGrid 的使用笔记：1. 开始
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics