jqGrid -- 自定义按钮

jqGrid -- 自定义按钮

用法：

如果使用新API

默认参数

caption：按钮名称，可以为空，string类型

buttonicon：按钮的图标，string类型，必须为UI theme图标onClickButton：按钮事件，function类型，默认null position：first或者last，按钮位置

title：string类型，按钮的提示信息

cursor：string类型，光标类型，默认为pointer id：string类型，按钮id

如果设置多个按钮：

按钮间的分隔

默认参数：

sepclass：ui-jqgrid的属性名

sepcontent：分隔符的内容

jqGrid -- 翻页与自定义按钮补充

jqGrid的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下：

JS的用法：

如果使用新API：

或者：

grid_id ：表格id

gridpager ：导航栏id

parameters ：参数列表

prmEdit, prmAdd, prmDel, prmSearch, prmView ：事件参数使用：

详细参数说明

属性类型说明默认值

add boolean 是否启用新增功能，当点击按钮

时会触发editGridRow事件

true

addicon string 给新增功能设置图标，只有UI

theme里的图标才可以使用ui-icon-plus

addtext string 新增按钮上的文字空addtitle string 当鼠标移到新增按钮上时显示的

提示

新增一行

alertcap string 当我们edit,delete or view一行

记录时出现的提示信息

警告

alerttext string 当edit,delete or view一行记录

时的文本提示请选择一行记录

closeOnEscape boolean 是否可以使用esc键关闭对话框true del boolean 是否启用删除功能，启用时会触

发事件delGridRow

true

delicon string 设置删除按钮的图标，只有UI

theme里的图标才可以使用ui-icon-trash

deltext string 设置到删除按钮上的文字信息空

deltitle string 当鼠标移到删除按钮上时出现的

提示删除锁选择的行

edit boolean 是否启用可编辑功能，当编辑时

会触发事件editGridRow

true

editicon string 设置编辑按钮的图标，只有UI

theme里的图标才可以使用ui-icon-pencil

edittext string 编辑按钮上文字空

edittitle string 当鼠标移到编辑按钮上出现的提

示信息编辑所选择的行

position string 定义按钮位置，可选值left,

center and right.

left

refresh boolean 是否启用刷新按钮，当点击刷新

按钮时会触发

trigger(“reloadGrid”)事件，而且

true

会清空搜索条件值

refreshicon string 设置刷新图标，只有UI theme

里的图标才可以使用ui-icon-refresh

refreshtext string 刷新按钮上文字信息空refreshtitle string 当鼠标移到刷新按钮上的提示信

息

重新加载

refreshstate string 指明表格如何刷新。firstpage：

从第一页开始刷新；current：

只刷新当前页内容

firstpage

afterRefresh function 当点击刷新按钮之后触发此事件null

search boolean 是否启用搜索按钮，会触发

searchGrid 事件true

searchhicon string 设置搜索按钮的图标，只有UI

theme里的图标才可以使用ui-icon-search

searchtext string 搜索按钮上的文字空searchtitle string 当鼠标移到搜索按钮上的提示信

息

搜索

view boolean 是否启用查看按钮，会触发事件

viewGridRow false

viewicon string 设置查看按钮的图标，只有UI

theme里的图标才可以使用ui-icon-document

viewtext string 查看按钮上文字空

viewtitle string 当鼠标移到查看按钮上的提示信

息查看所选记录

实例：

[js]

[js]

jqGrid -- 翻页

jqGrid的翻页要定义在html里，通常是在grid的下面，且是一个div对象：

js代码：

不必给翻页设置任何的css属性。在jqGrid里定义的翻页可以是：:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). 推荐使用前两个，当使用其他方式时jqGrid的导入导出功能时会引起错误。

导航栏的属性：

如果想改变这些设置：

1、方法一：

2、方法二：

导航栏的属性

属性名类型说明默认

值

是否

可以

被修

改

lastpage integer 只读属性，总页数0 NO

pager mixed 导航栏对象，必须是一个有效

的html元素，位置可以随意空字

符串

NO

pagerpos string 定义导航栏的位置，默认分为

三部分：翻页，导航工具及记

录信息

center NO

pgbuttons boolean 是否显示翻页按钮true NO pginput boolean 是否显示跳转页面的输入框true NO

pgtext string 页面信息，第一个值是当前页

第二个值是总页数语言

包

YES

reccount integer 只读属性，实际记录数，千万

不能跟records 参数搞混了，

通常情况下他们是相同的，假

如我们定义rowNum=15，但

我们从服务器端返回的记录为

20即records=20，而

reccount=15，表格中也显示

15条记录。

0 NO

recordpos string 定义记录信息的位置，可选

值：left, center, right

right NO

records integer 只读属性，从服务器端返回的

记录数

none NO

recordtext string 显示记录的信息，只有当

viewrecords为true时起效，

且记录数必须大于0

语言

包

yes

rowList array[] 可以改变表格可以显示的记录空no

数，格式为[10,20,30] array[] rowNum integer 设置表格可以显示的记录数20 yes viewrecords boolean 是否要显示总记录数信息false no

所有这些参数都是可以修改的，比如：

跟翻页相关的事件只有一个：onPaging

事件名参数说明

onPaging pgButton 当点击翻页按钮但还为展现数据时触发此事件，当然这跳转栏输入页码改变页时也同样触发此事件。参数pgButton可选值：first,last,prev,next