jean7155
- 浏览: 63071 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
u014549257：
...
Apache Mina: StreamIoHandler传输文件处理 -
至尊包：
想问一下，这个官网的列子如果要兼容3.0以下的版本要怎么处理？ ...
Swipe Views (水平分页)
基本的方法
jQuery("#grid_id").jqGrid(options);
options
1. 关于国际化配置
jqGrid的语言文件配置是一个基本文件。 这个文件在HTML文件中应用（<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>）， 默认配置了表格中的某些默认语言的显示。 如果需要改成中文， 则调用以上路径的grid.locale-cn.js文件。
2. 其它属性
设置全局选项
当某些设置需要运用在所有的grid上时，可采用extend函数来配置。
例如：如果要设置一个斑马行数据，并且所有的grid都要使用这个设置。
覆盖全局设置
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. 其它属性
| 属性 | 类型 | 描述 | 默认值 | 可修改？ |
| ajaxGridOptions | object | 可设置grid请求数据的ajax设置。可能修改包含error, complete, beforeSend事件的现有配置。 | empty object | Y |
| ajaxSelectOptions | object | This option allows to set global ajax settings for the select element when the select is obtained via dataUrl option in editoptions or searchoptions objects | empty object | Y |
| altclass | string | 为grid中的斑马行配置不同的样式。 可以创建自定义样式并替换改值。 这个选项必须在altRows=true的情况下使用。 | ui-priority-secondary | Yes. 刷新 |
| altRows | boolean | 是否使用斑马线 | false | Yes.刷新 |
| autoencode | boolean | 如果设置为true，则将server端传来的信息加密并修改模型后提交数据。 比如： < => <. | false | Yes |
| autowidth | boolean | 设置为true, grid宽度根据父元素的宽度自动调整。 只有当grid创建时才被使用。 当父元素改变宽度时，需要使用setGridWidth方法重新调整grid。 | false | No |
| caption | string | Grid的标题。 为空时不显示标题。 | empty string | No.Method avail. |
| cellLayout | integer | 决定每个表单元格padding + border的宽度。起始数据 5表明： paddingLef(2) + paddingRight (2) + borderLeft (1) = 5 | 5 | N |
| cellEdit | boolean | 是否允许单元格编辑 | false | Yes |
| cellsubmit | string | 单元格内容保存 | 'remote' | Yes |
| cellurl | string | 单元格保存的 url | null | Yes |
| cmTemplate | object | 配置一套属性去覆盖colModel中的默认值. | null | No |
| colModel | array | 列举列属性。 | empty array | No |
| colNames | array | 列名称,需和colModal的列数码匹配。 | empty array[] | No |
| data | array | 存储数据。 | empty array | Yes |
| datastr | string | 字符型数据，当datatype=xmlstring / jsonstring. | null | Yes |
| datatype | string | 数据类型。1) xml ,2) xmlstring , 3)json, 4)jsonstring , 5) local (客户端的 array data), 6) javascript ,7) function | xml | Yes |
| deepempty | boolean | 当事件或插件从属于单元格时，设置为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. | false | Yes |
| deselectAfterSort | boolean | datatype=local时使用. | true | Yes |
| direction | string | 表中文字的方向. 默认是ltr (Left To Right). 这个属性目前只适用于Firefox 3.x 和 IE>=6. Safari, Google Chrome和 Opera不能完全支持rtl. | ltr | No |
| editurl | string | Defines the url for inline and form editing. May be set to clientArray to manually post data to server, see Inline Editing. | null | Yes |
| emptyrecords | string | 当表内记录为空时显示。viewrecords=true时有用。 | see lang file | Yes |
| ExpandColClick | boolean | 设置为true时，点击单元格会出现树形结构的grid. | true | No |
| ExpandColumn | string | 设置colModel的哪个列可出现树形grid。 默认是第一列可显示。 treeGrid=true是可用。 | null | No |
| footerrow | boolean | 设置为true时，表和pager之间会出现footer表，列和colModel中的列数目一致。 | false | No |
| forceFit | boolean | 设为true时,当一个列的宽度变化时，右边相邻的列会重新调整列宽以使表不出现水平滚动条。这个配置项和shrinkToFit不能兼容使用。i.e if shrinkToFit false时, forceFit忽略不计. | false | No |
| gridstate | string | 2种状态: 可见 / 不可见 | visible | No |
| gridview | boolean | 历史版本的jqGrid，包括3.4.X,在加载大数量数据时 (行数>= 100 )会导致速度问题。现在的版本已解决了这个问题。如果设为true,可以立刻提速5-10倍。 但是同时不能使用treeGrid, subGrid,或afterInsertRow事件. | false | Yes |
| grouping | boolean | 分组 | false | Yes |
| headertitles | boolean | 设为 true时，会出现列标题。 | false | No |
| height | mixed | 可设 number (pixels) or % (only 100% is acceped) 或 auto(这个参数我设置为：auto,或者%时，会报错。 为什么了？？) | 150 | No.Method avail. |
| hiddengrid | boolean | 设为true时起始时grid是隐藏的. 只显示标题，不显示数据。只有点击显示/隐藏按钮来交替显示或隐藏grid. 当然，此时标题需要有文字显示。 | false | No |
| hidegrid | boolean | 标题栏右面显示/隐藏按钮是否显示。标题栏需要有文字显示 | true | No |
| hoverrows | boolean | 设为false时，鼠标滑过grid数据行的功能不可用。 | true | Yes |
| idPrefix | string | 数据加载时， string作为ID前缀 | empty | Yes |
| ignoreCase | boolean | 默认的本地查询时区别大小写的。 | false | Yes |
| inlineData | empty object | 当单元格内可编辑数据时，可将增加内容的数据提交给服务端 | {} | Yes |
| jsonReader | array | 描述json数据的结构。 | No | |
| lastpage | integer | 总页数。可使用以下方法设置：your_grid.setGridParam({lastpage: your_number}) | 0 | No |
| lastsort | integer | 从0开始，最后排序的列数的索引。 | 0 | No |
| loadonce | boolean | 设为true时, 服务端之提供一次数据并转换为local数据类型。以后的数据加载使用这个local数据类型.此时，pager的函数都不可用。 | false | No |
| loadtext | string | 加载和排序数据时的文字显示。 在国际化文件中设置。 | Loading… | No |
| loadui | string | ajax操作过程中显示选项disable - 不使用jqGrid的操作进行中提示。 可使用自定义的提示。enable (default) - 在中央显示默认的操作提示 (default value is Loading…) . block - 显示loadtext属性中设置的操作提示， 并锁定所有的grid操作，直至ajax操作完成。 这个操作会使paging, sorting，工具栏上的所有操作都不可用。 | enable | Yes |
| mtype | string | POST” 或 “GET” | GET | Yes |
| multikey | string | 当multiselect=true时才可使用. 配置多选时可用的键：shiftKey， Alt Key, ctrlKey | empty string | Yes |
| multiboxonly | boolean | 当multiselect=true时.点击行的任何位置都可选定该行， 当multiboxonly=true同时成立时, 只有checkbox选择后行多行才可被选定，点击行的任何位置（checkbox未选），只有该行被选定，其它行不被选。 | false | Yes |
| multiselect | boolean | 多行选定功能是否可用。左边出现新的一列，其中是checkbox选择按钮。 | false | No. see HOWTO |
| multiselectWidth | integer | 多选功能启用后，checkbox列的列宽 | 20 | No |
| page | integer | 页码。可作为参数传递给服务端获取相应数据。 | 1 | Yes |
| pager | mixed | 使用pager的按键组来导航数据。必须是有效的HTML元素。 比如：<div id=pager>.另外，导航栏可以放在表的任何位置。有效的设置可以是：pager, #pager, jQuery('#pager'). 个人推荐使用#pager. See Pager | empty string. | No |
| pagerpos | string | pager的位置。 默认情况下pager创建3个部分：pager，导航按钮，h和一个记录的信息。 | center | No |
| pgbuttons | boolean | 配置pager后，pager按钮是否显示。 | true | No |
| pginput | boolean | 是否需要输入页码。 | true | No |
| pgtext | string | 显示当前页，先显示当前页，再显示总页数。 | See lang file | Yes |
| prmNames | array | 默认信息： {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) | none | Yes |
| postData | array | url后附加的数组。使用如下：{name1:value1…}. | empty array | Yes |
| reccount | integer | 只读属性. grid下具体的行数。不要和records参数混淆。例如：rowNum=15, 但服务端返回了20行数字，则records=20, 但 reccount=15 (grid 显示 15行数字，不是20行). | 0 | No |
| recordpos | string | pager里的记录信息：left, center, right. | right | No |
| records | integer | 只读属性，从服务端返回的记录数。 | none | No |
| recordtext | string | pager里显示的文字. viewrecords=true时被激活.当记录总数>0时显示。配置方法：{0} - 记录的起始位置，根据页数和返回记录数决定{1} - 终止位置 {2} - 从服务端返回的记录数 | see lang file | Yes |
| resizeclass | string | Assigns a class to columns that are resizable so that we can show a resize handle only for ones that are resizable. | empty string | No |
| rowList | array[] | pager中的一个可选框，显示每页显示的数据行数。如果为空，则不显示这个选择框。一般设置为：[10,20,30] | empty arrray | No |
| rownumbers | boolean | 设置为true时，最左边出现一行新的列，显示行数，从1开始。此时colModel自动添加一个新元素：rn. 注意:colModel中不能出现rn. | false | No |
| rowNum | integer | grid中需要查看多少数据。作为url的参数去服务端查询数据。备注：如果这个参数设为10，服务端返回了15条记录，则grid只显示10条。如果设为-1，则这个功能不启用。 | 20 | Yes |
| rowTotal | integer | 确定从服务端需要返回的记录数。备注：rowNum设定grid需要显示的总记录数，rowTotal设定我们可以操作的记录数。 | null | Yes |
| rownumWidth | integer | 当rownumbers=true,此参数设定数字列的宽度。 | 25 | No |
| savedRow | array | 只读属性，在修改行或单元格前，保存行或单元格内的数据。 | empty array | No |
| searchdata | array {} | 包含搜索的数据，存在形式：name:value. | empty array{} | Yes |
| scroll | boolean or integer | 创建动态的滚动grid. 如果这项功能启动，pager功能则消失， 可以使用竖直滚动条加载数据。如果滚动系数设置为integer值（1）， grid只显示可见的数据。 这样，数据加载可不考虑内存溢出。 另外，服务端可加一个选项：npage(prmNames array). 如果设置了这个参数，grid会请求更多页的数据。 | false | No |
| scrollOffset | integer | 设定水平滚动条的宽度。 | 18 | No.Method avail. |
| scrollTimeout | integer (milliseconds) | 当scroll=1时，此参数控制超时的操作。 | 200 | Yes |
| scrollrows | boolean | 如果设置为true,在滚动时使用setSelection以选择一行时，被选定的行可见。 | false | Yes |
| selarrrow | array | 只读属性，当multiselect=true时，提交目前被选的行。是一个一维数组。 | empty array [] | No |
| selrow | string | 只读属性。 包含了最末被选行的ID。 当使用分页功能的时候，这个选项设为null. | null | No |
| shrinkToFit | boolean 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,则列宽根据这个数值调整。 | true | No |
| sortable | boolean | 设为true时，当鼠标拖曳列时，grid重新排序。 这个功能是在jQuery UI sortable widget基础上实现的，因此要确保html中加载了这个widget. 备注：colModel中也有sortable的属性 | false | No |
| sortname | string | 当加载服务端返回的数据时，根据设定的列进行排序。（排序数据类型是xml或jason的数据）。这个参数可以添加在url后。 如果以设定的某列排序，该列的表头会出现顺序倒序的排序标志。 | empty string | Yes |
| sortorder | string | 加载服务端返回的xml或json数据时，加载的数据根据设定进行顺序或倒序排列。这个参数可以添加在请求的url后。有两个值：asc or desc. | asc | Yes |
| subGrid | boolean | 如果设定为true,可使用sub-grid.当subGrid被启动，则最左边的列前出现新的列，并包含+图片，可点击该图片扩展数据。 | false | No |
| subGridOptions | object | subgrid的属性。 | see Subgrid | Yes |
| subGridModel | array-[] | subgrid的模型对象，描述subgrid的列。subGrid=true时有效。 | empty array | No |
| subGridType | mixed | 允许subgrid以服务的形式加载。如果这个参数不设置，则使用父grid的默认数据类型。 | null | Yes |
| subGridUrl | string | subGrid=true时有效.subgrid获取数据请求的url设置，将行的id作为参数请求subgrid的数据。 | empty string | Yes |
| subGridWidth | integer | subgrid=tue时，subgrid列宽设置。 | 20 | No |
| toolbar | array | 设置工具栏。该参数有2个元素：1） 启动工具栏，2）根据body层（表数据）来定义工具栏的相对位置。一般是：top, bottom. 比如：toolbar: [true,”both”]， 则出现2个工具栏，分别在数据栏上下。2个数据栏应该有2个div元素， 上面的id命名是t_+grid的id，下面的id命名是“tb_” + grid的id. | [false, ''] | No |
| toppager | boolean | 设定一个分页元素，在标题栏下，数据栏上。命名为： grid_id + “_toppager”. | false | No |
| totaltime | integer | 只读属性。当加载xml和json数据时，计算加载数据的时间。 | 0 | No |
| treedatatype | mixed | 设定初始数据类型。一般设置后便不可改变。 | null | No |
| treeGrid | boolean | 设定是否使用tree grid format. | false | No |
| treeGridModel | string | 设定treeGrid的方法，值：nested or adjacency | nested | No |
| treeIcons | array | 设置了tree grid中使用的图片。 | The default values are: {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} | No |
| treeReader | array | 基本的grid的colModel延伸定义 | No | |
| tree_root_level | numeric | 当使用treeGrid时，根元素定义。 | 0 | No |
| url | string | 提交url给服务端以获得请求的数据。 | null | Yes |
| userData | array | 包含请求的客户信息。 | empty array | No |
| userDataOnFooter | boolean | 设为true时，将用户数据放在footer中。如果用户数据中包含colModel中的任何数据，则在列中显示该数据。 | false | Yes |
| viewrecords | boolean | 如果是true, jqGrid显示从头到尾的记录数字。显示在pager栏内：: “View X to Y out of Z”. | false | No |
| viewsortcols | array | 设置的目的是为了查看排序（向上/向下箭头）的不同表现。[false,'vertical',true]. 第一个参数：所有具有排序属性的列是否可见排序按钮。如果是true, 则都可见，如果是false,则只有最后排序的列可见排序按钮。 第二个参数：图片怎么放置。竖向还是横向。第三个参数：点击函数。如果是true,则用户点击列标题的任何地方，都引起排序。 如果false,则只有点击排序按钮才发生排序。重要点：如果第三个设为false, 第一个参数一定要true,否则用户无法找到可点击的排序按钮。 | [false,'vertical',true] | No |
| width | number | 如果不设置，则所有列的宽度总数=grid的宽度。如果设置，每个列的初始宽度根据shrinkToFit选项定义的调整。 | none | No. Method avail. |
| xmlReader | array | xml数据类型描述。 | 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的使用笔记：5. 事件
2013-04-14 21:53 75471. 事件举例： var lastSe ... -
jqGrid的使用笔记：4. 数据操作
2013-04-14 19:52 1926数据类型 xml， json， jsonp， array， x ... -
jqGrid的使用笔记：3. colModel API
2013-03-24 20:22 2300colmodel属性 colModel定义列属性， 语法是： ... -
jqGrid 的使用笔记：1. 开始
2013-03-22 21:26 1332来源 官方下载地址http://www.trirand.com ... -
IndexedDB学习三：保存图片和文件
2013-03-19 11:45 3434目标： 创建和大概数据库（省略） 创建对象存储（省略） ... -
IndexedDB学习二：使用
2013-03-18 09:25 1318目标 打开数据库连接，开始一个事物 创建存储对象 请求数据库 ... -
IndexedDB学习一：概念
2013-03-18 09:12 1122基本概念： IndexedDB可以使用户在其浏览器中保存大型数 ...
相关推荐
- **搜索功能**：使用 `searchGrid` 方法启用高级搜索功能。 - **导出数据**：可以导出表格数据到 CSV、Excel 或 PDF。 - **自定义行为**：通过事件监听器如 `loadComplete`、`onSelectRow` 进行扩展。 ### 5. ...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码，结果引用的CSS和JS文件不知道从哪里弄，结果上网下载，不是版本不对，就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
在这个“jqGrid表格内容查询读取代码.zip”压缩包中，包含了实现jqGrid功能的基本文件，如index.html、jqgrid以及img目录。 首先，我们来详细了解一下jqGrid的核心功能： 1. 数据展示：jqGrid能够以表格的形式展示...
jqGrid 使用 AJAX 进行数据的异步加载和提交。当用户进行排序、分页或搜索操作时，jqGrid 自动发送请求到服务器，并处理返回的数据。服务器端应能处理这些请求并返回相应的 JSON 或 XML 数据。 9. **本地数据**： ...
JqGrid文档：...新增、删除等一些基本功能都可以去JqGrid Demo中找到。 逻辑思路：第一次加载本年度的经营计划数据，加载完成后，将JqGrid设置成本地数据，这样分页、数据查询都成customs。只能修改本
这些文件包括jqGrid的样式表`ui.jqgrid.css`，jQuery库`jquery-2.0.3.min.js`，jqGrid的核心脚本`jquery.jqGrid.min.js`以及本地化文件`grid.locale-en.js`。确保正确地链接到这些资源，以便jqGrid能正常工作。 接...
首先，jqGrid 的基本结构包括一个表格元素（`<table>`）和一个用于分页的容器（`<div>`）。在提供的代码中，我们可以看到这样的布局： ```html <!--jqGrid所在--> <table id="grid-table"> <!--jqGrid 浏览导航...
3. **jqgrid学习笔记网搜和个人经验1.pdf**：作者通过网络搜集和自己的实践，整理出的学习笔记，包含了常见问题解决方案和实践经验分享，对于初学者极具参考价值。 **总结** jgGrid作为一个强大的JavaScript表格...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码，结果引用的CSS和JS文件不知道从哪里弄，结果上网下载，不是版本不对，就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...