`

jqgrid的应用

 
阅读更多

获取grid的所有ID值

var getDataIDs = $("#GridList").jqGrid("getDataIDs");
 

获取当前选中的ID值

var currentID = $("#GridList").jqGrid("getGridParam", "selrow");
 

获取当前行的所有数据

var rowData = $("#GridList").jqGrid("getRowData", currentID);  
 

更新当前选中的行

$("#GridList").setSelection(setcurrentID, true); 
 

动态修改jqgrid提交的参数

$("#GridList").appendPostData( { userName :userName , userCode :userCode }  
 

动态翻页

$("#GridList") .jqGrid('setGridParam',{page:toPage}).trigger("reloadGrid");
 

当前Grid的总行数

var currentRecodes = $("#GridList").getGridParam("records");

 

当前显示的页号

var currentpage = $("#GridList") .getGridParam("page");
 

总页码

var totalPage =$("#GridList").getGridParam("lastpage");
 


当前请求的URL

var url = $("#GridList") .getGridParam("url");
 

单元格内的文本自动换行--参考http://blog.qumsieh.ca/2009/12/03/jqgrid-textword-wrapping/

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}
 

 

删除中间分页器

$( "#gridID"+ "_center" ).remove( ); 
 

 

 

 

常用调用方法:

1、beforeRequest

2、loadComplete

3、postData

 

 

 

 

 

 

jqGrid提供了大量的选项设置,开发者可以通过设置选项对应值来控制jqGrid,比如表格的宽度、高度、数据类型以及列 名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称:值(name:value)的形式,也可以是对象(object)及数组 (array)的形式配置。

jqGrid选项(Option)

调用jqGrid只需要执行以下代码:

jQuery("#grid_id").jqGrid(options);  

options即jqGrid的选项设置,请参照以下表格。

属性

类型

描述

默认值

ajaxGridOptions

object

此项用于设置当表格设置获得数据时,ajax的全局属性,注意此项可能覆盖所有当前的ajax设置(包括error, complete和beforeSend 事件)。

empty

ajaxSelectOptions

object

此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时, ajax的全局属性。

empty

altclass

string

交替行的类。 此项仅当altRows设置为true时有效。

ui-priority-secondary

altRows

boolean

设置为交替行表格

false

autoencode

boolean

当设置为true时,对来自服务器的数据和提交数据进行encodes编码。如< 将被转换为&lt;

false

autowidth

boolean

当设置为true时,表格宽度将自动匹配到父元素的宽度。这个匹配只在表格建立时进行,为了使表格在父元素宽度变化时也随之变化,可以使用setGridWidth方法

false

caption

string

表格的标题。显示在Header上。若为空时将不会显示。

empty

cellLayout

integer

该属性确定单元格的padding + border 宽度。通常不修改该属性,但若表格的CSS中改变了td元素,该属性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5

5

cellEdit

boolean

是否允许单元格编辑。

false

cellsubmit

string

确定单元格内容保存方式是remote还是clientArray 。

'remote'

cellurl

string

单元格保存的url。

null

colModel

array

描述列参数数组。这是表格最重要的部分,详见colModel API .

null

colNames

array[]

列名称数组。该名称将在Header中显示。名称以逗号分隔,数量应与colModel 数组数量相等

empty

data

array

以数组的形式保存本地数据。

empty

datastr

string

当datatype被设置为xmlstring或jsonstring时,为数据串。

null

datatype

string

定义表格希望获得的数据的类型,有效值有:

Xml —xml数据

xmlstring—xml字符串

json—JSON数据

jsonstring—JSON字符串

local—客户端数据(数组)

javascript—javascript数据

function—函数返回数据

 

xml

deselectAfterSort

boolean

只适用于当datatype为local时。当一个排序被应用时取消当前选定行。

true

direction

string

表格中的书写方向。“ltr”从左到右(缺省值),“rtl”从右到左

ltr

editurl

string

定义行内编辑地址URL

null

emptyrecords

string

当返回(或当前)数量为零时显示的信息此项只用当viewrecords 设置为true时才有效。

 

ExpandColClick

boolean

true时,点击展开行的文字,treeGrid展开或收拢

true

ExpandColumn

string

指定用于张开treeGrid的列(名称来自colModel),未设置即用第一列。此项只有当treeGrid为true时有效.

null

footerrow

boolean

如果设置为true时,将生成一个表脚行,列数等于colModel

false

forceFit

boolean

如果设置为true,改变列宽,相邻列也将调整以适应整体表格,将不会出现水平滚动条。

false

gridstate

string

表格的当前状态。有visible或hidden

visible

gridview

boolean

设置为true将提高5~10倍的显示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件

false

grouping

boolean

是否设置表格组

false

height

mixed

表格高度。可为数值、百分比或auto

150

hiddengrid

boolean

如果设置为true,表格开始被隐藏,数据不被载入,只显示标题。当第一次点击显示/隐藏按钮显示表格,数据从服务器载入。

false

hidegrid

boolean

是否允许显示/隐藏按钮可用。只有标题不为空时可用。

true

hoverrows

boolean

表行是否有鼠标悬停效果

true

jsonReader

array

JSON数据结构数组

 

lastpage

integer

请求返回的总页数

0

lastsort

integer

排序的列号(0开始)

0

loadonce

boolean

设置为true时,表格只一次读取服务器数据(使用适当datatype),之后,datatype 自动变为local ,所有进一步操作都在客户端完成,pager功能(若存在)将失效。

false

loadtext

string

数据请求和排序时显示的文本

Loading…

loadui

string

此项控制ajax进程进行时的动作。Disable—取消jqGrid的进程指示,可使用自定义的指示。 enable (缺省)—表格中间显示loading。 block – 显示“Loading”信息,禁用页面上的所有功能,直到数据装入完成。

enable

mtype

string

定义提交类型POST或GET

GET

multikey

string

此属性只有当multiselect为true时有效,定义多选时的组合键,可选值有: shiftKey ,altKey,ctrlKey

empty

multiboxonly

boolean

此属性只有当multiselect为true时有效,. Multiboxonly设置为true时,只有点击checkbox时该行才被选中,点击其他列,将清除当前行的选中。

false

multiselect

boolean

此属性设为true时启用多行选择,出现复选框

false

multiselectWidth

integer

若multiselect 为true时,定义多选列的宽度。

20

page

integer

设置请求初始页的数量,此参数通过URL从服务器接受数据

1

pager

mixed

定义分页浏览导航条。必须是一个HTML元素,如<div id="page"></div>

empty

pagerpos

string

定义表格浏览导航条的位置,缺省情况下建立一个包括3部分的导航条:页码,导航按钮和记录信息。

center

pgbuttons

boolean

定义导航激活时导航按钮是否显示。

true

pginput

boolean

定义导航栏是否有页码输入框。

true

pgtext

string

当前页信息。第一个量为当前页,第二个量为总页数。

 

prmNames

array

缺省情况下prmNames: { page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 以POST方式发送到服务器,字段为: page,rows,sidx,sord,search,nd 例如要将sidx改为mysort,可写成: prmNames: {sort: “mysort”}. 这样提交到服务器的字符串就变为: page=1&rows=10&mysort=myindex&sord=asc 若将一些参数设为null,这些参数将不再发往服务器。例如prmNames: { nd:null} 则nd参数将不被发送。 Npage参数参见scroll option.

none

postData

array

此数组能直接传递到url。这个数组可使用这种形式{name1:value1…}。

empty

reccount

integer

只读属性。定义表格显示的行数。切勿与records混淆。

0

recordpos

string

定义页中记录信息的位置,可以是left,center,right。

right

recordpos

object

交替行的类

true

records

integer

只读属性。定义从请求中获得的记录数

none

recordtext

string

可在页面上显示的提示信息,此文字只在viewrecords 为true是有效,并且当记录总数大于0时才显示。

此文字中{}中的内容表示:

{0} 该页显示的第一个记录的记录号

{1} 该页显示的最后一个记录的记录号

{2} 获得的记录总数

 

resizeclass

string

列可变大小时的类

empty

rowList

array[]

用于改变显示行数的下拉列表框的元素数组。

empty

rownumbers

boolean

若此属性为true,表格左侧将添加一用于显示行数(从1开始)的列。此时colModel自动扩展出一个名为rn的元素。所以在colModel中不要定义rn。

false

rowNum

integer

表格中可见的记录数。此参数通过url传递给服务器供检索数据用。注意:若此参数设置为10,而服务器返回15条记录,将只有10条记录被装入。若此参数被设置为-1,则此检查失效

20

rownumWidth

integer

当rownumbers为true时,定义显示行数的列的宽度。

25

savedRow

array

只读属性。用于行编辑和单元格编辑保存数据之前

empty

scroll

boolean or integer

创建动态滚动表格。当设为启用时,pager被禁用,可使用垂直滚动条来装入数据。

false

scrollOffset

integer

定义垂直滚动条的宽度。

18

scrollrows

boolean

该项启用时,用setSelection 选定一行,表格将滚动到被选行可见。

false

selarrrow

array-[]

只读属性。当multiselect 为true时,包含当前选定的行。此为一维数组,值为表格中选定行的ID。

empty

selrow

string

只读属性。内容是最后选定行的ID。如火应用了排序或pagging,该值为null。

null

shrinkToFit

boolean or integer

该项描述计算每列相对于表格宽度的初始宽度的类型。

若为true,并且设置了列宽度,则每列的宽度根据定义宽度缩放。

若为false,并且设置了列宽度,表格宽度为设置宽度,列宽度不会重新计算,使用colModel中定义的值

true

sortable

object

启用此项,允许使用鼠标重新排序列。

true

sortname

string

从服务器读取XML或JSON数据时初始的排序名,此名被加到URL中。

empty

sortorder

string

从服务器读取XML或JSON数据时初始的排序类型,此类型被加到URL中。可选值为asc或desc。

asc

subGrid

boolean

设置为true,可使用子表格。启用子表格,将在基本表的左边将添加一列,并包含一个“+”图像,用户可以点击扩展行。

false

subGridModel

array-[]

该属性用于描述子表格的模式,只有subGrid 为true时有效。它是一个用于描述子表格列的数组。

empty

subGridType

mixed

用于定义子表格装入的数据类型,若不定义,则使用与父表格同样的数据类型。

null

subGridUrl

string

该属性用于定义子表格获得数据的URL。行的ID将键入此URL中,若要添加其他参数,可使用subGridModel 中的选项。

empty

subGridWidth

integer

定义子表格的列宽

20

toolbar

array

该参数定义表格的工具栏。参数是一个包含两个值的数组,第一个值使工具栏有效,第二个值相对位置(可以是top、 bottom、both)。例如:设置toolbar为 [true,”both”],将在表格的头部和底部建立两个工具栏,两个工具栏位两个DIV元素,头部DIV元素的ID为“t_表格ID”,底部DIV元 素的ID为“tb_表格ID”。若只有一个工具栏(top或bottom)时,DIV的ID为“t_表格ID”。

[false,'']

toppager

boolean

是否在表格上部显示分页条。

false

totaltime

integer

只读参数。用于记录装入XML和JSON数据的时间。

0

treedatatype

mixed

定义初始数据类型

null

treeGrid

boolean

启用(禁用)TreeGrid。

false

treeGridModel

string

定义TreeGrid的方法。可以是nested或adjacency。

nested

treeIcons

array

此数组设置TreeGrid中使用的图标。图标应是UI theme中的有效图标。缺省为 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}

 

treeReader

array

扩展表格的colModel。这里定义的字段将添加到colModel的尾部并隐藏。服务器将返回这些字段的值。

 

tree_root_level

numeric

确定treeGrid相对于根元素的级别。

0

url

string

请求数据的url地址

null

userData

array

此数组保存请求的自定义信息,可随时使用

empty

userDataOnFooter

boolean

到为true时, userData直接放置在页脚。

false

viewrecords

boolean

是否在浏览导航栏显示记录总数

false

viewsortcols

array

定义表头中排序图标的外观和行为。缺省为[false,'vertical',true]。

第一个参数设定是否显示所有定义了排序的列旁显示图标。缺省的false表示只有当前排序列旁的图标显示。设为true可使所有可排序列都显示图标。

第二个参数设定排序图标如何放置。vertical为垂直放置,horizontal为水平放置。

第三个参数设定点击功能。True表示表头点击排序,false表示只点击排序图标排序。若将此参数设为false时,请确保第一个参数为true,否则将无法排序。

 

width

number

若为设置,表格的宽度为colModel 中定义的所有列宽度的总和。若设置了该项,每列的初始宽度按照shrinkToFit 设置的值

none

xmlReader

array

描述预期的XML数据结构的数组。

 

ColModel API

colModel属性以数组的形式定义各个表格列。这是jqGrid中很重要的部分。语法为:

jQuery("#gridid").jqGrid({  

...  

   colModel: [ {name:'name1', index:'index1'...}, {...}, ... ], 

...  

});  

 

 

属性

类型

描述

默认值

align

string

定义表格单元格(非表头)的对齐方式,可取值:left, center, right.

left

classes

string

此属性用于定义列的类名,当有多个类名时,用空格间隔,例如:“class1 class2”。在表格的CSS中,有一个预定义的类ui-ellipsis用于定义特定的行

empty

datefmt

string

日期格式,可用/,-和.。作为间隔符。y、Y、yyyy用于4位年,YY、yy用于2位的月,d、dd用于日期

Y-m-d

defval

string

搜索字段的缺省值,此参数只用于自定义搜索是的初始值。

empty

editable

boolean

定义字段是否可编辑,用于单元格编辑、行编辑和表单模式

false

editoptions

array

根据edittype 参数定义可用的值数组

empty

editrules

array

设置可编辑字段的补充规则

empty

edittype

string

定义行编辑和表单模式的编辑类型,可以是text、textarea、select、checkbox、 password、button、image和file。

text

fixed

boolean

若设为true,即使shrinkToFit设置为true,列宽也不允许重新计算。GridWidth方法改变表格宽度时,列宽也不会改变。

false

formoptions

array

定义表单编辑的各种选项

empty

hidedlg

boolean

若设置为true,该列将不出现在模式对话框中,用户可以此控制列的显示或隐藏

false

hidden

boolean

定义初始化时,列是否隐藏。

false

index

string

通过sidx参数设置排序时的索引名。

empty

key

boolean

在未从服务器获得ID的情况下,该列可设置为行ID。只有一列可设置该属性,若出现多列,表格只采用将第一个设置了该属性的列,其他列忽略。

false

label

string

当colNames数组为空时,定义此列的标题。若colNames数组和此属性都为空,标题为该列的name属性值。

none

name

string

设置列在表格中的唯一名称,此属性是必须的。或者使用保留字subgrid、cb和rn.

Required

resizable

boolean

定义是否可变列宽

true

sortable

boolean

定义是否可以排序

true

sorttype

mixed

当datatype为local时,用于定义排序列类型。可取int/integer(整数)、float/number/currency(小数)、date(日期)、text(文本)

text

title

boolean

当设置为false时,鼠标滑向单元格时不显示title属性

true

width

number

设置列的初始宽度,可用pixels和百分比

150

 

分享到:
评论

相关推荐

    jqgrid应用

    **jqGrid应用** jqGrid是一款基于jQuery的开源数据网格插件,它提供了强大的数据展示、编辑和管理功能,尤其适用于Web应用程序中展示大量的结构化数据。对于初学者来说,掌握jqGrid的应用是提升Web开发效率的重要一...

    jqGrid dialog例子

    在jqGrid应用中,Model代表数据模型,View是用户界面,Controller负责协调Model和View之间的交互。 接下来,dialog组件是jQuery UI的一部分,它允许创建可定制的对话框,通常用于显示额外的信息或执行特殊操作。在...

    mvc jqgrid 应用

    ### MVC + Jqgrid + 存储过程应用详解 在本篇内容中,我们将深入探讨一个结合了MVC架构、JqGrid插件以及SQL Server存储过程的应用案例。该案例展示了如何在一个MVC项目中利用JqGrid进行数据展示,并通过存储过程...

    JQGrid 入门案例

    通过以上步骤,我们可以构建一个基础的JQGrid应用,包括JSON数据的加载、增删改查操作、下拉框和文本框的使用等。随着对JQGrid的深入学习,我们可以进一步定制样式、优化性能,甚至实现更复杂的功能,比如分组、排序...

    JqGrid For ASP.Net

    6. **sample_project**:示例项目文件夹,包含一个完整的JqGrid应用实例,供开发者参考和学习。 7. **js**:JavaScript库和JqGrid相关的脚本文件,包括JqGrid的核心脚本和其他辅助脚本。 综上所述,JqGrid for ASP...

    jqGrid的例子,按照官方网络上面配置的。

    jqGrid是一款功能强大的JavaScript数据网格插件,常用于在网页上展示、操作和管理大量结构化数据。它基于jQuery库,提供了丰富...无论是在Ubuntu还是Windows环境下,开发者都可以参考这个示例来搭建自己的jqGrid应用。

    JqGrid国际化Demo.zip

    通过正确加载语言文件、配置初始化选项以及可能的自定义翻译,我们可以创建一个能适应多种语言环境的JqGrid应用。这不仅提高了用户体验,也增强了应用的全球化适应性。在实际开发中,可以根据项目需求调整和扩展这些...

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...

    jqGrid表格内容查询读取代码.zip

    总之,这个压缩包提供了一个基础的jqGrid应用实例,适合初学者学习和理解如何在HTML5环境中集成和使用jqGrid。通过研究和修改这个示例,你可以掌握如何动态加载数据、实现搜索和排序功能,以及如何定制和美化表格。...

    jqGrid实例demo

    在"jqGrid实例demo"中,我们可以看到一个实际的jqGrid应用示例,帮助我们理解和学习如何在项目中运用这个工具。 1. **安装与引入** 在开始使用jqGrid前,我们需要下载jqGrid的JavaScript和CSS文件,并将其引入到...

    jqGrid详解及高级应用

    在实际应用中,以XML数据获取方式为例,开发者需要配置后台页面(如XMLData.aspx)并确保其返回数据格式与xmlReader要求的格式匹配。xmlReader的配置项包括字段映射、页码、数据总条数、记录数等关键信息。 以上...

    jqgrid 项目手把手开发文档

    通过上述步骤,我们不仅完成了开发环境的搭建,还构建了一个基本的jqGrid应用示例。这些内容覆盖了从环境配置到具体项目实施的全过程,对于初学者来说是非常有价值的参考资料。同时,也提醒开发人员在实际项目中遵循...

    struts1-hibernate-spring框架中jqgrid页面生成详解

    首先,我们来看一下S1SH中jqGrid应用的基本步骤: 1. **Action层控制**:当用户发起请求时,Action层接收请求并处理。在提供的代码示例中,`query`方法被调用,返回一个ActionForward对象,指定要跳转的页面。例如...

    jqGrid表格应用——新增与删除数据

    在"jqGrid表格应用——新增与删除数据"这个主题中,我们可以探讨以下知识点: 1. **jqGrid的基本结构**:jqGrid的HTML结构通常包括一个`&lt;table&gt;`元素,以及必要的CSS和JavaScript引用。例如,`index.html`可能包含`...

    jqgrid中文文档API

    它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将详细介绍jQgrid的中文文档API,涵盖了其原理、使用方法、参数配置、事件处理、数据处理、...

    jqGrid_api中文文档

    jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责数据管理,而客户端则用于数据展示和用户交互。jqGrid可以简化数据库信息的展示,并能将...

    jqGrid4.6完整包

    1. **jqGrid 简介**:jqGrid 是一款基于 jQuery 的开源网格插件,它提供了数据管理、排序、搜索、分页等功能,广泛应用于数据密集型应用。jqGrid4.6 是其一个稳定版本,具有良好的兼容性和丰富的特性。 2. **可编辑...

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...

    jqGrid中文文档.doc

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在...在实际应用中,你可以根据项目需求选择合适的组件和配置,以实现高效的数据管理界面。通过深入理解 jqGrid 的 API 和各种选项,可以定制化地满足不同场景的需求。

    jqGrid demo (完整版)

    这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1. **jqGrid 简介** jqGrid 提供了丰富的功能,包括分页、排序、搜索、编辑、添加、...

Global site tag (gtag.js) - Google Analytics