`
zengshaotao
  • 浏览: 788770 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery-Grid分页

 
阅读更多

一、jqGrid特性:

  • 基于jquery UI主题,开发者可以根据客户要求更换不同的主题。
  • 兼容目前所有流行的web浏览器。
  • Ajax分页,可以控制每页显示的记录数。
  • 支持XML,JSON,数组形式的数据源。
  • 提供丰富的选项配置及方法事件接口。
  • 支持表格排序,支持拖动列、隐藏列。
  • 支持滚动加载数据。
  • 支持实时编辑保存数据内容。
  • 支持子表格及树形表格。
  • 支持多语言。
  • 最关键目前是免费的。

二、jqGrid使用方式:

1.下载文件
  1. 下载jqGrid的软件包,目前最新版本为4.4.1 下载地址为:http://www.trirand.com/blog/?page_id=6
  2. 下载jQuery文件,目前最新版本为1.8.2 下载地址为:http://code.jquery.com/jquery-1.8.2.min.js
  3. 下载jqGrid皮肤,下载地址为:http://jqueryui.com/themeroller/ 我使用的是:ThemeRoller->gallery->cupertino样式
2.准备文件
在项目的根目录下,建立相应的文件夹,放入下载的文件,目录结构如下图:
3.页面中得代码
3.1、head中加入引用
  • css文件引入:
<link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">

 

  • js文件引入:
<script type="text/javascript" src="jquery-1.8.2.min.js" />
<script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>

 

3.2、body中的代码
<!-- jqGrid table list4 -->
<table id="list4"></table>
<!-- jqGrid 分页 div gridPager -->
<div id="gridPager"></div>

 

其中,list4为列表jqGrid,gridPager为列表的分页div
3.3、js中的代码
复制代码
$(document).ready(function(){
    $("#list4").jqGrid({
        url:contextPath + "search.action",
        datatype:"json", //数据来源,本地数据
        mtype:"POST",//提交方式
        height:420,//高度,表格高度。可为数值、百分比或'auto'
        //width:1000,//这个宽度不能为百分比
        autowidth:true,//自动宽
        colNames:['添加日期', '手机号码', '银行卡号','备注','操作'],
        colModel:[
            //{name:'id',index:'id', width:'10%', align:'center' },
            {name:'createDate',index:'createDate', width:'20%',align:'center'},
            {name:'phoneNo',index:'phoneNo', width:'15%',align:'center'},
            {name:'cardNo',index:'cardNo', width:'20%', align:"center"},
            {name:'remark',index:'remark', width:'35%', align:"left", sortable:false},
            {name:'del',index:'del', width:'10%',align:"center", sortable:false}
        ],
        rownumbers:true,//添加左侧行号
        //altRows:true,//设置为交替行表格,默认为false
        //sortname:'createDate',
        //sortorder:'asc',
        viewrecords: true,//是否在浏览导航栏显示记录总数
        rowNum:15,//每页显示记录数
        rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。
        jsonReader:{
            id: "blackId",//设置返回参数中,表格ID的名字为blackId
            repeatitems : false
        },
        pager:$('#gridPager')
    });
});
复制代码

 

至此,整个使用jqGrid的前端使用就基本完毕了,当加载此页面的时候,将初始化jqGrid表格,并通过url请求数据,返回datatype类型的数据。至于后台的数据,大家可以自己调用,并返回json格式的数据即可填充表格。
具体的参数可以查询jqGrid API。
分享到:
评论

相关推荐

    jquery-grid

    **jQuery Grid 知识点详解** `jQuery Grid`,又称为`jqGrid`,是一款基于JavaScript的开源数据网格插件,专门用于构建交互式的、功能丰富的数据表格。它充分利用了jQuery库的强大功能,使得在前端展示和管理大量...

    JqueryGrid 无刷新分页

    "JqueryGrid 无刷新分页"指的是利用jQueryGrid实现的页面内容不更新的情况下进行数据分页的技术。这种方法可以提高用户体验,因为用户在浏览大量数据时无需等待整个页面重新加载,只需点击分页按钮即可获取新的数据...

    归档-jquery-grid懒加载.zip

    jQuery Grid,通常被称为jqGrid,是一个非常流行的JavaScript插件,用于在网页上创建交互式的网格视图。这个“归档-jquery-grid懒加载.zip”文件包含的资源显然与使用jqGrid实现数据的懒加载功能有关。懒加载,或...

    jQuery-grid:TheOdinProject jQuery 项目

    首先,jQuery-grid是一个强大的插件,它允许开发者创建功能丰富的表格,包括排序、筛选、分页和编辑等。这种灵活性使它成为处理大量结构化数据的理想选择,尤其是在数据分析、报告展示或用户交互场景中。jQuery-grid...

    jquery.jqGrid-4.3.0+jquery-ui-1.8.16.custom所有包

    首先,jQuery.jqGrid 4.3.0是jqGrid的一个重要版本,它提供了一个功能强大的表格组件,能够支持分页、排序、过滤、编辑和添加数据等多种功能。这个版本引入了许多增强功能,如改进的性能优化、新的API接口和更丰富的...

    jquery-easyui-portal.zi

    例如,表格(grid)组件可以与服务器端进行数据交互,实现分页、排序、过滤等功能。开发者可以通过AJAX调用后台接口,将数据动态加载到表格中,提供实时更新的信息展示。 在门户中,个性化配置是关键特性之一。jQuery...

    jquery-easyui-1.3.3

    4. **表格(Grid)**:Grid 是用于展示数据的组件,支持分页、排序、过滤、编辑等功能。它可以动态地从服务器获取数据,并且能够处理大量数据,提高性能。 5. **布局(Layout)**:EasyUI 提供了灵活的布局组件,...

    jquery-easyui-1.4.5_easyuiapi_

    - **Grid(表格)**:Grid组件用于展示数据表格,支持分页、排序、过滤、编辑等功能,可以与后台数据源无缝对接。 - **Tree(树形结构)**:Tree组件用于展示层次结构的数据,支持展开、折叠、选择节点等操作,常...

    jquery插件--表格树--GridTree(后台分页版本20091018)(过期)

    《jQuery插件——表格树GridTree(后台分页版本20091018)详解》 在Web开发中,展示数据的方式多种多样,其中表格由于其清晰、直观的特点,被广泛应用于数据呈现。然而,当数据量较大时,单纯的表格可能会显得过于...

    jquery-easyui-1.5版本

    3. **表格(Grid)**:展示大量数据,支持排序、筛选、分页等功能,可与服务器进行异步数据交互。 4. **菜单(Menu)**:创建下拉菜单或侧边栏菜单,用于组织和展示应用的功能选项。 5. **对话框(Dialog)**:...

    jquery-easyui-1.3.1.zip

    - **数据网格**:例如,使用 Grid 组件展示数据列表,可以实现分页、排序、过滤和编辑等功能。 - **对话框**:Dialog 组件用于创建弹出窗口,常用于信息提示、表单填写等场景。 - **表单验证**:Form 组件结合 ...

    jquery-easyui-1.3.2+帮助文档

    - **表格(Grid)**: 支持数据分页、排序、过滤和编辑,适用于显示大量结构化数据。 - **菜单(Menu)**: 创建下拉菜单或浮动菜单,方便用户导航和操作。 - **表单(Form)**: 提供了多种表单元素,支持验证和...

    Sigma-Grid.zip_grid_grid jquery_html jquery_jquery grid

    Sigma Grid 是一个基于 jQuery 的数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,如分页、排序、过滤、编辑等,适用于各种数据密集型的Web应用。这个压缩包包含了关于 Sigma Grid 的使用指南和...

    jquery-easyui-1.3.2+中文文档

    3. **表格(Grid)**: 支持数据的增删改查,具有分页、排序、过滤等功能,能与后台数据源无缝对接。 4. **菜单(Menu)**: 提供了多种样式的下拉菜单和多级菜单,方便用户进行导航。 5. **表单(Form)**: 提供了...

    struts2-jquery-plug ShowCase

    jQuery Grid是一个功能强大的表格组件,它可以展示大量数据,并提供排序、分页、搜索和编辑等功能。在Struts2应用中使用jQuery Grid,可以轻松地处理服务器端的数据,实现动态加载和异步更新,提高数据展示的效率和...

    jquery-easy-ui-1.3.2

    - **表格(Grid)**:用于展示大量数据,支持分页、排序、过滤和编辑等功能,便于数据管理和操作。 - **菜单(Menu)**:创建下拉菜单,提供多级结构,方便用户操作。 3. **主题定制**:EasyUI 提供了多种预设...

    ng-grid实现动态列表.rar

    压缩包中可能还包含了一些其他库文件,如AngularJS的核心库、jQuery(ng-Grid在某些版本可能依赖jQuery)或者其他的依赖库。确保这些库都正确引入,才能使ng-Grid正常工作。 总的来说,ng-Grid实现动态列表的关键...

    jquery-easyui1.5 源码

    grid组件不仅支持基本的数据显示,还具备排序、分页、筛选、编辑等功能。源码中定义了如loadData、load、refresh等方法来处理数据加载和刷新。通过设置columns属性,可以自定义列的显示和行为。对于行操作,如增删改...

    jquery-easyui-portal

    EasyUI的核心组件包括表格(grid),对话框(dialog),菜单(menu),表单(form)等,而"jquery-easyui-portal"则在此基础上添加了对图表(charts),列表(lists),球型图(spherical charts)等元素的支持,使得开发者能够...

    jquery插件--表格树--GridTree(20091011更新版本)(过期)

    《jQuery插件——表格树GridTree详解》 在网页开发中,数据的展示方式多种多样,其中表格和树形结构是常见的两种。当这两种元素结合在一起时,就形成了表格树,这种布局方式既能清晰地展示层次关系,又能有效利用...

Global site tag (gtag.js) - Google Analytics