`

jqgrid-方法

阅读更多

jqGrid的方法,从3.6开始已经完全兼容jQuery UI库。
用法:
<script>
...
jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );
...
</script>

grid_id:表格的id;jqGridMethod:用到表格上的方法;parameter1,…parameterN :参数列表
此方法并不是返回请求的数据值而是返回一个jqGrid对象。

<script>
...
jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");
...
</script>

如果使用新的API:

<script>
...
jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );
...
</script>

grid_id:表格id;jqGrid:表格实例;method:表格支持的方法名;parameter1,...parameterN :参数列表

具体实例:

<script>
...
jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");
...
</script>

jqGrid配置使用新的api

<!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" />

<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 type="text/javascript">
	jQuery.jgrid.no_legacy_api = true;
</script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
...
</body>
</html>

要注意

<script type="text/javascript">
	jQuery.jgrid.no_legacy_api = true;
</script>

这段代码必须放在语言包之后jqGrid.js文件之前。

jqGrid方法

方法名 参数 返回值 说明
addJSONData data none 使用传来的data数据填充表格。使用方法:var mygrid = jQuery(”#”+grid_id)[0];var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null;
 
addRowData rowid,data, position, srcrowid 成功为true, 否则为false 根据参数插入一行新的数据,rowid为新行的id,data为新行的数据,position为新增行的位置,srcrowid为新增行的参考位置。data数据格式:{name1:value1,name2: value2…} name为在colModel中指定的名称
addXMLData data none 根据传来的数据填充表格。用法:var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML);
 
clearGridData clearfooter jqGrid对象 清除表格当前加载的数据。如果clearfooter为true时则此方法删除表格最后一行的数据
delRowData rowid 成功为true否则为false 根据rowid删除行,但不会从服务器端删除数据
footerData action,data, format jgGrid对象 设置或者取得底部数据。action:“get”或者“set”,默认为“get”,如果为“get”返回值为name:value,name为colModel中名称。如果为“set”则值为name:value,name是colModel中的名称。format:默认为true,当为true时,在设置新值时会调用formatter格式化数值
getCell rowid, iCol 单元格内容 返回指定rowid,iCol的单元格内容,iCol既可以是当前列在colModel中的位置索引也可以是name值。注意:在编辑行或者单元格时不能使用此方法,此时返回的并不是改变的值,而是原始值
getCol colname, returntype, mathoperation array[] or value 返回列的值。colname既可以是当前列在colModel中的位置索引也可以是name值。returntype指定返回数据的类型,默认为false。当为false时,返回的数组中只包含列的值,当为true时返回数组是对象数组,具体格式 {id:rowid, value:cellvalue} ,id为行的id,value为列的值。如: [{id:1,value:1},{id:2,value:2}…]。mathoperation 可选值为'sum, 'avg', 'count'
getDataIDs none array[] 返回当前grid里所有数据的id
getGridParam name mixed value 返回请求的参数信息
getInd rowid,rowcontent mixed 如果rowcontent为false,返回行所在的索引位置,id为行id。rowcontent默认为false。如果rowconent为ture则返回的为行对象,如果找不到行则返回false
getRowData rowid or none array{} 返回指定行的数据,返回数据类型为name:value,name为colModel中的名称,value为所在行的列的值,如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据,它得到的并不是编辑后的值
hideCol colnameor[colnames] jqGrid对象 如果参数为一个列名则隐藏此列,如果给定的是数组则隐藏指定的所有列。格式: [“name1”,”name2”]
remapColumns permutation, updateCells, keepHeader none 调整表格列的显示顺序,permutation为当前列的顺序,假如值是[1,0,2],那么第一列就会在第二位显示。如果updateCells为ture则是对单元格数据进行重新排序,如果keepHeader为true则对header数据显示位置进行调整
resetSelection none jqGrid对象 选择或者反选行数据,在多选模式下也同样起作用
setCaption caption jqGrid对象 设置表格的标题
setCell rowid,colname, data, class, properties jqGrid对象 改变单元格的值。rowid:当前行id;colname:列名称,也可以是列的位置索引,从0开始;data:改变单元格的内容,如果为空则不更新;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置单元格属性
setGridParam object jqGrid对象 设置grid的参数。有些参数的修改必须要重新加载grid才可以生效,这个方法可以覆盖事件
setGridHeight new_height jqGrid对象 动态改变grid的高度,只能对单元格的高度进行设置而不能对表格的高度进行动态修改。new_height:可以是象素值,百分比或者"auto"
setGridWidth new_width,shrink jqGrid对象 动态改变表格的宽度。new_width:表格宽度,象素值;shrink:true或者false,作用同shrinkToFit
setLabel colname, data, class, properties jqGrid对象 给指定列设置一个新的显示名称。colname:列名称,也可以是列的位置索引,从0开始;data:列显示名称,如果为空则不修改;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置label的属性
setRowData rowid,data, cssprop 成功true否则false 更新行的值,rowid为行id。data值格式:{name1:value1,name2: value2…} name为colModel中名称;cssprop:如果是string则会使用addClass方法将其加入到行的css中,如果是array或者对象则会直接加到style属性中
setSelection rowid,onselectrow jqGrid对象 选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow,onselectrow默认为ture
showCol colname jqGrid 显示列。colname可以是数组[“name1”,”name2”],但是name1或者name2必须是colModel中的name
trigger(“reloadGrid”) none jqGrid对象 重新加载当前表格,也会向服务器发起新的请求
updateColumns none none 同步表格的宽度,用在表格拖拽时,用法:var mygrid=jQuery(”#grid_id”)[0];mygrid.updateColumns();
       

jqGrid的通用方法和设置
这些方法并不和jqGrid对象绑定,可以随意使用:

<script>
...
jQuery.jgrid.jqGridFunction( parameter1,...parameterN );
...
</script>

jgrid.jqGridFunction 是函数名
parameter1,…parameterN 参数列表

函数名 参数 返回值 说明
ajaxOptions 空对象 none 这个函数可以改变jqgrid中用到的ajax请求参数,这个函数可以覆盖当前所有ajax请求设置。从3.6版本开始起有3个级别的ajax设置:第一个级别就是在模块中设置ajax请求;第二个级别就是通过此函数设置;第三级别的设置是控制全局ajax请求的设置:jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds)); 当然我们也可以单独设置ajax的参数
jqID string 解析后的string 转义字符串,把两个反斜杠(\\)转化为单个反斜杠(\)
jgrid.htmlDecode string 转换后string 把转码后的字符串还原
jgrid.htmlEncode string 编码后的string 把字符串编码
jgrid.format string 格式化后string 简单字符串模板。用法:Example jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4,result : “Please enter a value between 4 and 8.”
jgrid.getCellIndex cell index 这个方法是用来修复在ie7里的一个bug
jgrid.stringToDoc xmlstring xmlDoc 把xmlstring转换为dom对象
jgrid.stripHtml content new_content 去掉html标签返回标签中内容
jgrid.parse jsonstring 对象 把一个jsonstring转换为json对象,

jqGrid的方法

方法名 参数 返回值 说明
filterGrid grid_id,params HTML对象 构造jqGrid的查询界面。grid_id:表格id;params:参数
filterToolbar params jqGrid对象 同上。不同的是搜索输入框在header层下方
getColProp colname array{} 返回指定列的属性集合。name为colModel中名称
GridDestroy grid_id 成功true否则false 从dom上删除此grid
GridUnload grid_id 成功true否则false 跟GridDestroy不同的是table对象跟pager对象并不会被删除,以便下次使用
setGridState state jqGrid对象 设置grid的状态,显示或者隐藏。这个方法不会触发onHeaderClick 事件。
setColProp colname, properties jqGrid对象 设置新的属性,对于动态改变列属性是非常有用的,但是有些属性的修改并不会起效。用法:jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}});
sortGrid colname, reload jqGrid对象 按指定列进行排序。效果同setGridParam({sortname:'myname'}).trigger('reloadGrid'). 如果reload为true则会重新加载数据
updateGridRows data,rowidname,jsonreader 成功true否则为false 修改表格中某行的数据,data数据格式:[{name:value,name1:value1…}, {name:value,name2:value2…}],name为colModel中的名称;rowidname某行的名称。jsonreader:boolean值,默认false。如果为true则是定义数据的格式,data的值并不是name:value形式而只是value
分享到:
评论

相关推荐

    jquery.jqGrid-4.5.2.zip

    4. 调用jqGrid方法,如`$("#gridId").jqGrid()`启动插件。 五、进阶应用 1. **小工具栏**:通过插件实现自定义工具栏,如新增、删除、保存等操作按钮。 2. **树形视图**:支持树状数据结构展示,适用于层级关系的...

    jquery.jqGrid-4.4.3

    在本文中,我们将深入探讨jQuery.jqGrid-4.4.3版本,理解其功能、使用方法以及在实际项目中的应用。 jQuery.jqGrid是基于jQuery库的表格插件,提供丰富的功能,如数据的分页、排序、搜索和编辑等,适用于创建交互式...

    jquery.jqGrid-4.5.4

    1. **数据加载与分页**:jqGrid 支持服务器端和客户端两种分页方式,可以根据数据量选择合适的方法,有效提高页面性能。 2. **数据筛选**:用户可以通过内置的筛选工具对表格数据进行快速过滤,找到所需信息。 3. ...

    jqGrid4.8.2 jqgrid_demo40

    jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料。 jqGrid中文文档.doc------附加放在这里的其它资料。 jqGrid的使用.doc------附加放在这里的其它资料。

    jQuery tonytomov-jqGrid-v4.5.2 插件

    - 主文件:`tonytomov-jqGrid-1b4abea.js`,这是jqGrid的核心脚本文件,包含了所有核心功能和方法。 - 样式文件:可能包含CSS文件,如`ui.jqgrid.css`,用于定义表格的样式和布局。 - 图标资源:jqGrid可能使用的...

    jquery.jqGrid-3.5-beta

    jqGrid的亮点之一是其强大的API,允许开发者通过JavaScript调用各种方法来控制网格的行为。例如,`loadDataIf_needed`用于异步加载数据,`sortGrid`用于排序,`addRowData`用于添加新记录等。同时,jqGrid还支持多种...

    jqGrid-3.5.alfa-2

    jqGrid 是一个非常著名的 jQuery 插件,专用于创建数据密集型网格视图。这个"jqGrid-3.5.alfa-2"版本是截至2009年4月2日的最新版本,对于那些无法访问官方网站获取更新的用户来说,这是一个宝贵的资源。 jqGrid 的...

    jquery.jqGrid-4.1.2

    在实际开发中,jqGrid的使用方法通常涉及以下步骤: 1. 引入jqGrid的CSS和JS文件。 2. 创建HTML表格结构,设置相应的ID。 3. 使用jQuery选择器初始化jqGrid,配置各项参数。 4. 根据需要添加数据源和操作行为。 5. ...

    free-jqgrid-4.15.5.tgz

    四、使用方法与示例 使用jqGrid通常包括以下步骤: 1. 引入jqGrid的js和css文件。 2. 创建HTML表格结构。 3. 初始化jqGrid,配置相关选项。 4. 加载数据源,可以是JSON、XML或其他格式。 例如,一个基本的初始化...

    jqGrid-3.2.zip

    2. **jquery.jqGrid.js**:这是jqGrid的主要实现文件,包含了所有用于构建网格的功能和方法。通过引入这个文件,你可以利用jqGrid提供的API来定制你的数据网格,如设置列、定义数据源、绑定事件等。 3. **...

    jquery最好的插件jqGrid-3.4.2 学习资源

    了解jQuery的基本语法和方法对于使用jqGrid至关重要。 `jquery.jqGrid.js`是jqGrid的核心文件,它包含了用于创建数据网格的所有功能。jqGrid提供了丰富的功能,如分页、排序、搜索、过滤、编辑和添加数据等。通过这...

    jquery.jqGrid-4.3.2.zip

    本篇将深入探讨jqGrid的核心特性、使用方法以及主要文件结构。 首先,jqGrid的核心功能体现在以下几个方面: 1. **数据展示**:jqGrid能够动态加载大量数据,通过分页功能有效地管理数据流。用户可以自定义每页...

    jquery.jqGrid-4.3.1.zip

    3. 初始化jqGrid:使用jQuery选择器找到表格元素,调用jqGrid方法进行初始化,配置相关参数。 4. 配置数据源:设定数据加载方式、URL、字段映射等信息。 5. 添加额外功能:根据需要添加排序、分页、编辑等功能,以及...

    jquery.jqGrid-4.4.5.zip

    7. **使用方法**:要使用jqGrid,首先需要在HTML中引入jQuery库和jqGrid的CSS与JS文件,然后通过JavaScript初始化一个表格,配置相应的选项,如列定义、数据源、分页设置等。 8. **API与事件**:jqGrid提供了一系列...

    jquery.jqGrid-4.0.0.zip

    jqGrid 4.0.0 的使用方法通常涉及以下几个步骤: 1. 在 HTML 页面中引入 jqGrid 相关的 JavaScript 和 CSS 文件。 2. 创建一个空的 div 元素作为 jqGrid 的容器。 3. 使用 JavaScript 配置 jqGrid,包括数据源、列...

    jquery.jqGrid-4.1.1.zip

    3. 初始化jqGrid:调用jQuery的jqGrid方法,传入配置对象,配置数据源、列信息、分页等参数。 4. 实现交互:根据业务需求,添加搜索、排序、编辑等交互功能。 四、最佳实践与注意事项 1. 优化性能:对于大数据量的...

    jquery.jqGrid-4.3.0+jquery-ui-1.8.16.custom所有包

    《jQuery.jqGrid 4.3.0与jQuery UI 1.8.16自定义版全面解析》 在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画以及Ajax交互。jQuery.jqGrid是基于jQuery的开源数据网格插件...

Global site tag (gtag.js) - Google Analytics