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

jqgrid--分页

 
阅读更多

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

 

 

写道
<table id="list"></table>

<div id="gridpager"></div>

jQuery("#grid_id").jqGrid({

...

pager : '#gridpager',

...

});

 

 

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

导航栏的属性:

 

 

写道
$.jgrid = {

defaults : {

recordtext: "View {0} - {1} of {2}",

emptyrecords: "No records to view",

loadtext: "Loading...",

pgtext : "Page {0} of {1}"

},

...

}

 

如果想改变这些设置:

 

    jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});  

 

写道
jQuery("#grid_id").jqGrid({

...

pager : '#gridpager',

emptyrecords: "Nothing to display",

...

});

 

 

 

 

导航栏的属性:

 

属性名

类型

说明

默认值

是否可以被修改

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

可以改变表格可以显示的记录数,格式为 [10,20,30]

array

no

rowNum

integer

设置表格可以显示的记录

20

yes

viewrecords

boolean

是否要显示总记录数信

false

no

 

jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");  

 

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

 

onPaging

pgButton

当点击翻页按钮但还为展现数据时触发此事件,

当然这跳转栏输入页码改变页时也同样触发此事件。

参数 pgButton 可选值: first,last,prev,next

 

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

 

 

   <table id="list"></table>   

   <div id="gridpager"></div>   

 

 

写道
jQuery("#grid_id").jqGrid({

...

pager : '#gridpager',

...

});

jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

 

 

grid_id :表格id
gridpager :导航栏id
parameters :参数列表
prmEdit, prmAdd, prmDel, prmSearch, prmView :事件

 

    $.jgrid = {    
      
    ...    
      
       search : {    
      
        caption: "Search...",    
      
         Find: "Find",    
      
         Reset: "Reset",    
      
         odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],    
      
         groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],    
      
         matchText: " match",    
      
         rulesText: " rules"    
      
       },    
      
       edit : {    
      
         addCaption: "Add Record",    
      
         editCaption: "Edit Record",    
      
         bSubmit: "Submit",    
      
         bCancel: "Cancel",    
      
         bClose: "Close",    
      
         saveData: "Data has been changed! Save changes?",    
      
         bYes : "Yes",    
      
         bNo : "No",    
      
         bExit : "Cancel",    
      
      },    
      
      view : {    
      
        caption: "View Record",    
      
        bClose: "Close"    
      
      },    
      
      del : {    
      
        caption: "Delete",    
      
        msg: "Delete selected record(s)?",    
      
        bSubmit: "Delete",    
      
        bCancel: "Cancel"    
      
      },    
      
      nav : {    
      
        edittext: "",    
      
        edittitle: "Edit selected row",    
      
        addtext:"",    
      
        addtitle: "Add new row",    
      
        deltext: "",    
      
        deltitle: "Delete selected row",    
      
        searchtext: "",    
      
        searchtitle: "Find records",    
      
        refreshtext: "",    
      
        refreshtitle: "Reload Grid",    
      
        alertcap: "Warning",    
      
        alerttext: "Please, select row",    
      
        viewtext: "",    
      
        viewtitle: "View selected row"    
      
      },    
      
    ...  

 

 

 

属性

类型

说明

默认值

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

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

查看所选记

 

 

 

写道
jQuery("#grid_id").jqGrid({

...

pager : '#gridpager',

...

}).navGrid('#gridpager',{view:true, del:false},

{}, // use default settings for edit

{}, // use default settings for add

{}, // delete instead that del:false we need this

{multipleSearch : true}, // enable the advanced searching

{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/

);

 

 

 

 

分享到:
评论

相关推荐

    jquery.jqGrid-4.5.2.zip

    jqGrid是基于jQuery的表格插件,提供丰富的功能,如分页、排序、搜索、过滤、编辑、导出等,支持Ajax数据加载,能够处理本地或远程数据源。4.5.2版本是对早期版本的升级,优化了性能,增强了稳定性,并引入了一些新...

    jquery.jqGrid-4.4.3

    《jQuery.jqGrid-4.4.3:Web页面列表分页显示的高效解决方案》 在Web开发领域,数据展示是不可或缺的一部分,特别是在处理大量数据时,如何有效地进行分页显示,提高用户体验,成为了开发者关注的重点。jQuery....

    jquery.jqGrid-4.5.4

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

    jqGrid-master

    jqGrid 是一个强大的JavaScript库,专门用于在Web页面上创建交互式的数据表格。这个"jqGrid-master"压缩包是该库的最新版本,从官方英文站点下载,为用户提供了便捷的获取途径。jqGrid主要用于展示和操作数据,尤其...

    jQuery tonytomov-jqGrid-v4.5.2 插件

    jqGrid是基于jQuery库的,它提供了丰富的功能,如数据排序、分页、搜索、编辑以及自定义列等,使开发者能够轻松地实现复杂的数据展示和管理。 首先,jqGrid的核心特性包括: 1. 数据绑定:jqGrid支持多种数据源,...

    jquery.jqGrid-3.5-beta

    《jQuery.jqGrid-3.5-beta:一个强大的数据管理框架》 在Web开发领域,高效的数据管理和展示是至关重要的。jQuery.jqGrid是这样一个工具,它为开发者提供了强大而灵活的数据网格解决方案。这个名为"jquery.jqGrid-...

    jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar

    例如,要实现自定义的分页逻辑,开发者可能需要监听jqGrid的"loadComplete"事件,并结合jQuery UI的对话框展示分页信息。另外,对于性能优化,了解如何正确配置jqGrid的缓存策略和异步加载机制至关重要。 总的来说...

    jquery.jqGrid-4.1.2

    jqGrid提供了丰富的数据操作选项,包括排序、分页、搜索、编辑、添加和删除数据等,极大地简化了前端数据管理的工作。它的网格布局灵活,能够适应各种屏幕尺寸,使得数据展示既美观又实用。此外,jqGrid支持多种数据...

    jqGrid-3.5.alfa-2

    jqGrid 的核心功能包括数据展示、编辑、搜索、排序、分页以及自定义操作。它支持多种数据源,如 JSON、XML、CSV 或者直接从数据库中获取,使得在网页上展示大量结构化数据变得非常方便。以下是对压缩包中各个文件的...

    jquery.jqGrid-4.4.5

    - **数据分页**:jqGrid支持服务器端和客户端分页,能够有效地处理大数据量,减轻服务器负担。 - **数据排序**:用户可以点击表头进行数据排序,支持多列排序。 - **高级搜索**:提供复杂的过滤条件,如模糊搜索、...

    free-jqgrid-4.15.5.tgz

    jqGrid是一款基于jQuery的开源数据网格组件,它允许用户在网页上创建交互式的数据表格,支持数据的增删改查、排序、分页、过滤等多种功能。由于其丰富的功能和高度的定制性,jqGrid在企业级应用中得到了广泛应用。 ...

    jquery.jqGrid-4.0.0包

    它可以轻松地将服务器端的数据动态加载到网页上,形成表格形式的展示,支持分页、排序、搜索、过滤等多种操作。通过灵活的配置,开发者可以定制各种数据列,包括文本、数字、日期等,甚至可以自定义复杂的列模板,以...

    jquery.jqGrid-4.4.4.zip

    jqGrid 的插件扩展了其核心功能,提供了如分页、排序、搜索、编辑等附加特性。例如,`grid.locale-cn.js` 是中文语言包,使用户界面支持中文;`subgrid.js` 和 `treegrid.js` 分别用于子网格和树形网格的实现。...

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

    jqGrid提供了丰富的功能,如分页、排序、搜索、过滤、编辑和添加数据等。通过这个文件,你可以学习如何配置表格列、设置数据源、自定义操作按钮、以及利用其内置的API进行各种操作。 `combine.php`可能是一个用于...

    jqGrid-5.1.0表格插件.rar

    在5.1.0版本中,它提供了多种特性,使得Web开发者能够轻松地构建动态的表格,支持数据的检索、排序、筛选、编辑以及分页等功能。这款插件尤其适合需要展示大量结构化数据的应用场景。 jqGrid的国际化支持允许开发者...

    jquery.jqGrid-4.6.0

    这个压缩包“jquery.jqGrid-4.6.0”包含了该库的4.6.0版本,这是一个被广泛使用的稳定版本,提供了强大的数据网格功能,包括数据的检索、排序、过滤、编辑和分页。 首先,让我们详细了解jqGrid的核心组件: 1. **...

    jqGrid-3.2.zip

    jqGrid 是一个基于 jQuery 的开源网格插件,用于在网页上展示和操作表格数据。它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,使得开发者可以方便地创建交互性强的数据展示界面。这个"jqGrid-3.2...

    jquery.jqGrid-4.4.5.zip

    2. **分页功能**:jqGrid中的分页是通过"jqGrid"的"pager"参数实现的。你可以设置每页显示的行数(rows),以及分页栏的样式和行为。标签“jq分页”正是指的这一特性,它使得大量数据的展示变得高效且易于管理。 3....

Global site tag (gtag.js) - Google Analytics