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

jqGrid基本用法与示例

JavascriptJqueryjqGrid 
阅读更多

一、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

分享到：
| Linux安装教程基于CentOS64位6.3版本
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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. 数据操作：如何...

Magicbox
Global site tag (gtag.js) - Google Analytics