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

jqGrid基本用法与示例

阅读更多

一、jqGrid的基本用法

 

1、html页面

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqgrid-test</title>
<!-- 引用jQueryUI的start主题 -->
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />
<!-- 引用jqGrid样式 -->
<link rel="stylesheet" type="text/css" href="/resources/css/ui.jqgrid.css" />
<!-- 引用jQuery -->
<script type="text/javascript" src="/resources/scripts/libs/jquery-1.10.2.min.js"></script>
<!-- 引用jqGrid -->
<script type="text/javascript" src="/resources/scripts/libs/jquery.jqGrid.min.js"></script>
<!-- 引用jqGrid提供的国际化,否则中文会报JS错误 -->
<script type="text/javascript" src="/resources/scripts/i18n/grid.locale-cn.js"></script>
<!-- 引用jqGrid测试js -->
<script type="text/javascript" src="/resources/scripts/init.js"></script>
</head>
<body>
<!-- jqGrid必要DOM,用于创建表格列表 -->
<table id="list"></table>
<!-- jqGrid必要DOM,用于创建翻页 -->
<div id="pager"></div>
</body>
</html>

  

2、init.js文件

 

    jQuery("#list").jqGrid({
        // 请求后台json数据的url
        url:'list.json',
        // 后台返回的数据格式
        datatype: "json",
        // 列表标题
        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
        // 列表模型
        colModel:[ 
            {name:'id',index:'id', width:55}, 
            {name:'invdate',index:'invdate', width:90}, 
            {name:'name',index:'name asc, invdate', width:100}, 
            {name:'amount',index:'amount', width:80, align:"right"}, 
            {name:'tax',index:'tax', width:80, align:"right"}, 
            {name:'total',index:'total', width:80,align:"right"}, 
            {name:'note',index:'note', width:150, sortable:false} 
        ],
        // 一页显示的行记录数
        rowNum:10, 
        // 表格宽度
        width:700,
        // 表格高度
        height:200,
        // 翻页控制条中 每页显示记录数可选集合
        rowList:[10,20,30], 
        // 翻页DOM
        pager: '#pager',
        // 默认排序字段
        sortname: 'invdate',
        // 是否显示行号,默认值是false,不显示
        viewrecords: true,
        // 默认字段排序顺序,默认asc,正序
        sortorder: "desc", 
        // 列表总标题
        caption:"测试",
        // 数据加载完成并且DOM创建完毕之后的回调函数
        gridComplete: function(){
            //TODO
        },
        // 单元格被点击选择回调函数, rowid为改行数据id值,iCol为改行索引,cellcontent为该行html代码,e为click事件
        onCellSelect: function(rowid, iCol, cellcontent,e){
            //TODO
        }
    });

 

二、后台返回的数据及格式

 

格式1 :行数据包含id、cell两个固定属性,id的值是行数据的主键值,cell的值是行数据的数组封装

 

{
    "page":"1",
    "total":2,
    "records":"13",
    "rows":[
        {
            "id":"13",
            "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]
        },{
            "id":"12",
            "cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]
        },{
            "id":"11",
            "cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]
        },{
            "id":"10",
            "cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]
        },{
            "id":"9",
            "cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]
        },{
            "id":"8",
            "cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]
        },{
            "id":"7",
            "cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]
        },{
            "id":"6",
            "cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]
        },{
            "id":"5",
            "cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]
        },{
            "id":"4",
            "cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]
        }
    ]
}

  

 格式2 :直接把后台行数据json格式化

 

{
    "page":"1",
    "total":2,
    "records":"13",
    "rows":[
        {
            "id":"1",
            "invdate":"2007-10-06",
            "name":"Client 3",
            "amount":"1000.00",
            "tax":"0.00",
            "total":"1000.00",
            "note": null
        },
        {
            "id":"2",
            "invdate":"2007-10-06",
            "name":"Client 3",
            "amount":"1000.00",
            "tax":"0.00",
            "total":"1000.00",
            "note": null
        },
        ...
    ]
}

 

三、后台返回数据的说明

 

total 查询的总页数
page 查询的当前页码
records 查询的总记录数
rows 当前查询页的数据集合
id 行数据主键,默认值0
cell 行数据的数组格式封装,默认值“”

 

四、自定义后台返回数据属性

后台返回的数据格式必须满足上述两种格式,否则jqGrid解析就会错误或者某些功能失效。

更多情况下,后台返回的数据格式是符合上述两种格式之一的,只是属性名不一致而已。

比如jqGrid的page是当前页面,而多数应用程序可能会自定义为currPage,这个时候jqGrid

就无法解析了,不过jqGrid提供了jsonReader属性,可以让我们覆盖它原有的属性。

我们先看一下它的原有属性:

 

localReader = {
   root: "rows",
   page: "page",
   total: "total",
   records: "records",
   repeatitems: false,
   cell: "cell",
   id: "id",
   userdata: "userdata",
   subgrid: {root:"rows", repeatitems: true, cell:"cell"}
}

 

我们只需要定义jqGrid时设置jsonReader属性即可:

 

$(document).ready(function(){
    jQuery("#list").jqGrid({
        // 请求后台json数据的url
        url:'list.json',
        ...
        // 重写后台返回数据的属性
        jsonReader : {
            root : 'list', // 将rows修改为list
            page : 'currPage', // 将page修改为currPage
            total : 'totalPage', // 将total修改为totalPage
            records : 'totals' // 将records修改为totals
        }
    });
});

 

五、自定义请求参数

jqGrid异步请求的默认请求参数属性包含:

 

{
    page:"page",
    rows:"rows", 
    sort:"sidx", 
    order:"sord", 
    search:"_search", 
    nd:"nd", 
    id:"id", 
    oper:"oper", 
    editoper:"edit", 
    addoper:"add", 
    deloper:"del", 
    subgridid:"id", 
    npage:null, 
    totalrows:"totalrows"
} 

 

比如:http://localhost:8080/list.json?_search=false&nd=1381300504786&rows=10&page=1&sidx=invdate&sord=desc

如果需要改写请求参数属性,jqGrid也提供了prmNames这个属性用来修改请求参数属性。

 

我们只需要定义jqGrid时设置prmNames属性即可:

 

$(document).ready(function(){
    jQuery("#list").jqGrid({
        url:'list.json',
        ...
        prmNames : {
            'page':'currPage',
            'rows':'pageSize'
        }
    });
});

上面的请求示例就会修改为

http://localhost:8080/list.json?_search=false&nd=1381300504786&pageSize=10&currPage=1&sidx=invdate&sord=desc

分享到:
评论

相关推荐

    jqgrid全套示例代码

    本资源包含的"jqgrid全套示例代码"涵盖了 jqGrid 的多种使用场景,帮助开发者深入理解和应用这个插件。 1. **Web.config**:这是ASP.NET应用程序的核心配置文件,包含了应用程序的设置,如连接字符串、身份验证模式...

    ASP.NET jqGRID 控件 源代码 示例

    本示例将深入探讨如何在ASP.NET环境中集成并使用jqGrid控件。 一、jqGrid概述 jqGrid是一款开源的jQuery插件,支持多种功能,如数据分页、排序、搜索、过滤、编辑和添加记录等。它具有高度可定制性,可以通过主题和...

    jqGrid源文件+官方MVC示例

    jqGrid是一款功能强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了...通过研究源代码和示例,开发者可以更好地掌握jqGrid的使用技巧,灵活应对各种复杂的数据展示和管理需求。

    jqgrid文档及示例

    1. **基本使用**:介绍如何在HTML页面中引入jqGrid所需的JavaScript和CSS库文件,这通常通过`&lt;script&gt;`和`&lt;link&gt;`标签完成,确保jqGrid的核心功能和样式正常工作。 2. **表格初始化**:讲解如何使用JavaScript创建...

    jqGrid 4.1 示例(一)

    以下是jqGrid的基本配置示例: ```javascript $("#grid").jqGrid({ url: 'Service.svc/GetData', // WCF服务地址 datatype: 'json', mtype: 'GET', colNames: ['字段1', '字段2', '字段3'], // 列标题 colModel...

    jqGrid完整实例

    8. **API参考**:在实际使用过程中,查阅官方文档(如http://www.trirand.com/blog/)和社区资源(如提供的参考网址http://blog.mn886.net/jqGrid/)是非常重要的,它们提供了详细的API参考和示例代码,有助于解决...

    jqGrid练习示例

    jqGrid是一款功能强大的JavaScript数据网格插件,常用于创建交互式的HTML表格,它支持大量...通过分析和运行这个项目,开发者可以更深入地理解和掌握jqGrid的使用方法,从而在实际工作中有效地应用到自己的Web应用中。

    jqGrid 4.1 示例(二)

    本示例将深入探讨如何使用jqGrid与WCF服务(Windows Communication Foundation)配合,通过JSON传递参数以执行这些操作。 首先,我们需要在HTML页面中引入jqGrid所需的CSS和JavaScript文件。这通常包括jQuery库、...

    mvc + jqgrid 示例代码

    **MVC 模式与 JqGrid 结合详解** MVC(Model-View-Controller)是一种软件设计模式,常用于创建可维护、...通过理解并实践MVC的控制器、视图和JqGrid的配置与使用,开发者能够提升Web应用程序的用户体验和功能丰富度。

    jqGrid 4.1 示例(三)

    总结,本示例展示了如何在jqGrid 4.1中使用JSON进行多字段查询,同时结合WCF服务的OperationContract重载来处理复杂的查询逻辑。这种组合提供了强大的前后端交互能力,使得Web应用程序能够灵活、高效地处理数据查询...

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

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

    JqGrid插件+JqGridDemo+JqGrid主题

    通过学习和参考这些示例,开发者可以快速掌握JqGrid的基本用法,并将其应用到自己的项目中。 至于"JqGrid主题",则是指为JqGrid提供的视觉样式。JqGrid默认有多种主题,比如"ui.jqgrid"代表了jQuery UI的主题风格,...

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

    例如,一个名为`GetGridData`的方法可以返回JSON格式的数据,供jqGrid使用。在MVC4中,这通常通过`JsonResult`类型的动作结果实现。每个具体的控制器(如`EmployeeController`、`OrderController`等)可以根据业务...

    jqueryGridDemo jqGriddemo38

    在“jqueryGridDemo jqGriddemo38”这个项目中,我们深入探讨jqGrid的使用方法,并通过一系列的示例代码来帮助理解其核心概念和功能。 首先,jqGrid的基础设置通常涉及HTML结构、CSS样式和JavaScript脚本。`jqgrid....

    jqgrid 的treegrid用法

    这篇博文中,我们将深入探讨 jqGrid 的 TreeGrid 功能及其用法。 ### 一、jqGrid TreeGrid 基础 1. **初始化 TreeGrid** 在 HTML 页面中,首先需要创建一个 `div` 元素作为 jqGrid 的容器。然后通过 jQuery 选择...

    jqGridDemo

    - HTML文件:展示jqGrid的基本用法和示例。 - JavaScript文件:包含jqGrid的库和可能的自定义脚本。 - CSS文件:用于样式控制和主题定制。 - 数据文件:如JSON或XML,用于填充网格数据。 - 图像文件:可能用于图标或...

    jqgriddemo,样式漂亮,可以直接使用

    通过研究其代码和实际运行效果,可以快速掌握jqGrid的基本用法和高级技巧。对于初学者来说,可以从以下几个方面入手: 1. **安装和引入**:了解如何将jqGrid添加到HTML页面中,以及需要引用哪些CSS和JS文件。 2. *...

    jqgrid基本格式

    本文将详细介绍一个典型的`jqGrid`初始化脚本,帮助开发者快速理解和掌握其基本用法。 #### 二、代码解析 ##### 1. 函数定义 ```javascript function pageInit() { // ... } ``` 这里定义了一个名为`pageInit`...

    jqgrid4 核心文件

    `jqgrid_demo40.zip`则包含了一些示例代码和页面,帮助开发者了解如何在实际项目中使用jqGrid4。这些示例可能涵盖以下主题: 1. 基本配置:如何初始化jqGrid,设置表格列,加载数据,启用分页等。 2. 数据操作:如何...

Global site tag (gtag.js) - Google Analytics