`
a3mao
  • 浏览: 562577 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid学习 -------------- 方法

    博客分类:
  • Work
阅读更多
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方法
方法名参数返回值说明
addJSONDatadatanone使用传来的data数据填充表格。使用方法:var mygrid = jQuery(”#”+grid_id)[0];var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null;
addRowDatarowid,data, position, srcrowid成功为true, 否则为false根据参数插入一行新的数据,rowid为新行的id,data为新行的数据,position为新增行的位置,srcrowid为新增行的参考位置。data数据格式:{name1:value1,name2: value2…} name为在colModel中指定的名称
addXMLDatadatanone根据传来的数据填充表格。用法:var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML);
clearGridDataclearfooterjqGrid对象清除表格当前加载的数据。如果clearfooter为true时则此方法删除表格最后一行的数据
delRowDatarowid成功为true否则为false根据rowid删除行,但不会从服务器端删除数据
footerDataaction,data, formatjgGrid对象设置或者取得底部数据。action:“get”或者“set”,默认为“get”,如果为“get”返回值为name:value,name为colModel中名称。如果为“set”则值为name:value,name是colModel中的名称。format:默认为true,当为true时,在设置新值时会调用formatter格式化数值
getCellrowid, iCol单元格内容返回指定rowid,iCol的单元格内容,iCol既可以是当前列在colModel中的位置索引也可以是name值。注意:在编辑行或者单元格时不能使用此方法,此时返回的并不是改变的值,而是原始值
getColcolname, returntype, mathoperationarray[] 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'
getDataIDsnonearray[]返回当前grid里所有数据的id
getGridParamnamemixed value返回请求的参数信息
getIndrowid,rowcontentmixed如果rowcontent为false,返回行所在的索引位置,id为行id。rowcontent默认为false。如果rowconent为ture则返回的为行对象,如果找不到行则返回false
getRowDatarowid or nonearray{}返回指定行的数据,返回数据类型为name:value,name为colModel中的名称,value为所在行的列的值,如果根据rowid找不到则返回空。在编辑模式下不能用此方法来获取数据,它得到的并不是编辑后的值
hideColcolnameor[colnames]jqGrid对象如果参数为一个列名则隐藏此列,如果给定的是数组则隐藏指定的所有列。格式: [“name1”,”name2”]
remapColumnspermutation, updateCells, keepHeadernone调整表格列的显示顺序,permutation为当前列的顺序,假如值是[1,0,2],那么第一列就会在第二位显示。如果updateCells为ture则是对单元格数据进行重新排序,如果keepHeader为true则对header数据显示位置进行调整
resetSelectionnonejqGrid对象选择或者反选行数据,在多选模式下也同样起作用
setCaptioncaptionjqGrid对象设置表格的标题
setCellrowid,colname, data, class, propertiesjqGrid对象改变单元格的值。rowid:当前行id;colname:列名称,也可以是列的位置索引,从0开始;data:改变单元格的内容,如果为空则不更新;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置单元格属性
setGridParamobjectjqGrid对象设置grid的参数。有些参数的修改必须要重新加载grid才可以生效,这个方法可以覆盖事件
setGridHeightnew_heightjqGrid对象动态改变grid的高度,只能对单元格的高度进行设置而不能对表格的高度进行动态修改。new_height:可以是象素值,百分比或者"auto"
setGridWidthnew_width,shrinkjqGrid对象动态改变表格的宽度。new_width:表格宽度,象素值;shrink:true或者false,作用同shrinkToFit
setLabelcolname, data, class, propertiesjqGrid对象给指定列设置一个新的显示名称。colname:列名称,也可以是列的位置索引,从0开始;data:列显示名称,如果为空则不修改;class:如果是string则会使用addClass方法将其加入到单元格的css中,如果是array则会直接加到style属性中;properties:设置label的属性
setRowDatarowid,data, cssprop成功true否则false更新行的值,rowid为行id。data值格式:{name1:value1,name2: value2…} name为colModel中名称;cssprop:如果是string则会使用addClass方法将其加入到行的css中,如果是array或者对象则会直接加到style属性中
setSelectionrowid,onselectrowjqGrid对象选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow,onselectrow默认为ture
showColcolnamejqGrid显示列。colname可以是数组[“name1”,”name2”],但是name1或者name2必须是colModel中的name
trigger(“reloadGrid”)nonejqGrid对象重新加载当前表格,也会向服务器发起新的请求
updateColumnsnonenone同步表格的宽度,用在表格拖拽时,用法: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的参数
jqIDstring解析后的string转义字符串,把两个反斜杠(\\)转化为单个反斜杠(\)
jgrid.htmlDecodestring转换后string把转码后的字符串还原
jgrid.htmlEncodestring编码后的string把字符串编码
jgrid.formatstring格式化后string简单字符串模板。用法:Example jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4,result : “Please enter a value between 4 and 8.”
jgrid.getCellIndexcellindex这个方法是用来修复在ie7里的一个bug
jgrid.stringToDocxmlstringxmlDoc把xmlstring转换为dom对象
jgrid.stripHtmlcontentnew_content去掉html标签返回标签中内容
jgrid.parsejsonstring对象把一个jsonstring转换为json对象,


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

相关推荐

    jqGrid-3.5.alfa-2

    通过这些示例文件,开发者不仅可以学习到jqGrid的基本使用,还能了解到如何根据实际需求进行功能扩展和性能优化。对于需要在网页上处理复杂数据展示和交互的项目,jqGrid是一个非常实用的工具。

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

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

    free-jqgrid-4.15.5.tgz

    本文将深入探讨free-jqgrid-4.15.5版本,此版本包含了所有的js和css文件,为开发者提供了完整的jqGrid学习和应用资源。 一、jqGrid概述 jqGrid是一款基于jQuery的开源数据网格组件,它允许用户在网页上创建交互式...

    前端项目-free-jqgrid.zip

    2. **示例**:demo目录下的各种示例代码展示了jqGrid的各种功能和用法,是学习和调试的好帮手。 3. **文档**:docs目录中的文档详细解释了jqGrid的配置选项、方法、事件等,是开发者的参考手册。 4. **本地化**:i18...

    jquery.jqGrid-4.4.5.zip

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

    jqgrid学习

    本教程将深入探讨 jqGrid 的核心概念和使用方法。 1. **安装与引入** jqGrid 需要 jQuery 和 jQuery UI 作为依赖。在项目中,你可以找到 `jquery.jqGrid-4.4.3` 和 `jquery-ui-1.11.4.custom` 文件夹,分别包含了 ...

    Guriddo_jqGrid_JS_5.4.0-Trial.zip

    6. **学习和应用**:对于初学者,可以通过官方文档和示例代码学习如何使用jqGrid。对于开发者,可以结合其他前端框架(如Bootstrap)和后端技术(如PHP、ASP.NET、Node.js等)构建完整的Web应用。 总之,Guriddo_...

    jqGrid 4.4.1

    - **API**: jqGrid提供了丰富的API方法,如`jqGrid("getGridParam")`用于获取当前表格参数,`jqGrid("setGridParam")`用于修改表格设置,`jqGrid("reloadGrid")`用于刷新数据等。 - **事件处理**: 支持多种事件,如...

    jqgrid+三大框架

    以上就是"jqgrid+三大框架"项目的核心知识点,通过这个项目,开发者可以学习到如何将前端与后端完美结合,实现高效的数据展示和交互。同时,这也是一个典型的Java Web开发案例,对于理解和掌握Java EE应用的开发流程...

    MVC4网站中集成jqGrid表格插件-示例源代码.zip

    通过查看这个示例,你可以学习如何在实际项目中将jqGrid与MVC4结合使用,实现数据的动态加载、分页、排序和过滤功能。 总之,jqGrid在ASP.NET MVC4中的集成能够极大地提升Web应用的数据展示能力,使用户可以方便地...

    jqgrid_doc

    "jqgriddocs_english_bi.pdf"文档是jqGrid的英文版官方文档,它详细介绍了如何安装和使用jqGrid,包括基本配置、数据源设定、列定义、操作方法、事件处理、自定义函数等内容。文档还涵盖了各种高级特性,如树形网格...

    jqGrid 3.6 中文

    jqGrid 是一个非常著名的...在使用jqGrid 3.6中文版时,开发者应考虑其特点和限制,并结合提供的示例文件来学习和应用。对于更复杂的需求,可能需要查阅官方文档或升级到更现代的版本以利用更多的功能和优化。

    jqGrid_php

    - `examples` 文件夹包含了 jqGrid 的实际应用示例,帮助开发者理解和学习如何使用。 - `documentation` 文件夹则可能包含 jqGrid 的 API 文档或用户手册,为开发提供详细参考。 4. **使用流程**: - 在 PHP ...

    jqgrid4.6.zip

    "Jqgrid之onSelectRow 和onCellSelect 事件不能一起用-yellowcong_yelllowcong的专栏-CSDN博客_files"和"jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)_web开发自学-CSDN博客_files"以及"jqgrid...

    jqgrid全套示例代码

    - 学习jqGrid的API,包括方法调用和参数设置,以实现更高级的功能。 总之,这份jqGrid的示例代码集为开发者提供了一个实践和学习jqGrid的完整平台,无论是初学者还是有经验的开发者,都能从中受益匪浅,快速提升在...

    jqgrid学习笔记

    在页面中,你需要初始化 jqGrid,设置其属性和回调函数,然后调用 `$("#gridId").jqGrid()` 方法创建表格。例如,你可能需要设置列的标题、宽度和格式化函数,以及定义加载数据时的回调函数。 7. **功能扩展**: ...

    jqGrid表格插件(带中文/英文文档)

    files` 和 `jqGrid中文说明文档——选项设置-Helloweba-致力于WEB前端技术在中国的应用_files` 可能是相关文档的配套示例代码或资源,用于演示如何在实际项目中使用jqGrid,这些例子可以帮助开发者更直观地学习和...

    jqgrid theme

    1. **jQuery 和 jQuery UI**:理解这两个库的基础知识,包括它们的安装、引入以及基本使用方法,是使用 jqGrid 的前提。 2. **jqGrid 的基本结构**:掌握 jqGrid 的 HTML 结构、JavaScript 初始化代码,以及如何...

    Jquery表格插件jqGrid 4.3.0及其Demo

    `jqgrid_demo40.zip`包含了jqGrid 4.3.0的示例代码,可以帮助开发者快速了解和学习如何使用这个插件。这些示例涵盖了上述所有功能,例如如何设置表格样式、如何启用排序和分页、如何实现行内编辑等。通过查看和运行...

    jqGrid 中文大全(2)

    - `jqGrid基础学习` 系列文档详细介绍了 jqGrid 的基础功能,包括查询、分页、方法使用等。 这些资源涵盖了 jqGrid 的主要功能和用法,适合初学者逐步了解并掌握 jqGrid 的各项操作。通过深入学习和实践,可以充分...

Global site tag (gtag.js) - Google Analytics