`
什么向往
  • 浏览: 81111 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jqgrid--方法

 
阅读更多

jqGrid的方法,从3.6开始已经完全兼容jQuery UI库。

 

    jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );  
      
    jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");  

 

如果使用新的API:

 

    jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );  
      
    jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");   

 

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>  

 

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对象绑定,可以随意使用:

 

jQuery.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

简单字符串模板。

用法:

 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

boolean

dom 上删除此 grid

GridUnload

grid_id

boolean

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

boolean

修改表格中某行的数据,

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