jqGrid学习笔记

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。

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

详情请看：http://www.huosen.net/archives/142.html

本节介绍jqGrid其他的使用方法，主要是一些基本操作，特殊的数据显示等。

1 刷新jqGrid数据。

常用到刷新jqGrid数据的情况是，在用到查询的时候，根据查询条件，请求数据，并刷新jqGrid表格，使用方式如下：

$("#search_btn").click(function(){
    //此处可以添加对查询数据的合法验证
    var orderId = $("#orderId").val();
    $("#list4").jqGrid(‘setGridParam‘,{
        datatype:‘json‘,
        postData:{‘orderId‘:orderId}, //发送数据
        page:1
    }).trigger("reloadGrid"); //重新载入
});

① setGridParam用于设置jqGrid的options选项。返回jqGrid对象
② datatype为指定发送数据的格式；
③ postData为发送请求的数据，以key:value的形式发送，多个参数可以以逗号”,”间隔；
④ page为指定查询结果跳转到第一页；
⑤ trigger(“reloadGrid”);为重新载入jqGrid表格。

2 无数据的提示信息。

当后台返回数据为空时，jqGrid本身的提示信息在右下角，不是很显眼，下面方法将实现在无数据显示的情况下，在jqGrid表格中间位置提示“无数据显示”。如下图：当然，你的div样式可以设置的更好看些。

loadComplete: function() {//如果数据不存在，提示信息
    var rowNum = $("#list4").jqGrid(‘getGridParam‘,‘records‘);
    if (rowNum      if($("#norecords").html() == null){
            $("#list4").parent().append("</pre>
<div id="norecords">没有查询记录！</div>
<pre>");
        }
        $("#norecords").show();
    }else{//如果存在记录，则隐藏提示信息。
        $("#norecords").hide();
    }
}

① loadComplete 为jqGrid加载完成，执行的方法；

② getGridParam这个方法用来获得jqGrid的选项值。它具有一个可选参数name，name即代表着jqGrid的选项名，如果不传入name参数，则会返回jqGrid整个选项options。例：

$("#list4").jqGrid(‘getGridParam‘,‘records‘);//获取当前jqGrid的总记录数；

注意：这段代码要加在jqGrid的选项设置Option之间，即：$(“#list4″).jqGrid({});代码之间。且各个option之间加逗号间隔。

3 显示jqGrid统计信息。

通常统计信息都显示在jqGrid表格最后一行，分页控件之上，如下图：

代码片段：

$("#list4").jqGrid({
    ......
    colModel:[
        {name:‘productName‘,index:‘productName‘,align:‘center‘,sortable:false},
        {name:‘productAmt‘,index:‘productAmt‘, align:‘center‘}
    ],
    footerrow: true,//分页上添加一行，用于显示统计信息
    ......
    pager:$(‘#gridPager‘),
    gridComplete: function() {//当表格所有数据都加载完成，处理统计行数据
        var rowNum = $(this).jqGrid(‘getGridParam‘,‘records‘);
        if(rowNum > 0){
            var options = {
                url: "test.action",// 默认是form的action，如果写的话，会覆盖from的action.
                dataType: "json",// ‘xml‘, ‘script‘, or ‘json‘ (接受服务端返回的类型.)
                type: "POST",
                success: function(data){//成功后调用方法
                    $("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});
                }
            };
            $("#searchForm").ajaxSubmit(options);
        }
    }
});

详细介绍：

3.1jqGrid的options配置； 需要在jqGrid的options中添加如下属性：

footerrow: true,//分页上添加一行，用于显示统计信息

3.2 调用gridComplete方法，当数据加载完成后，处理统计行数据； 3.3调用jqGrid的footerData方法，为统计行赋值：

$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});
4 jqGrid的数据格式化。

jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置

基本用法：

jQuery("#jqGrid_id").jqGrid({
...
   colModel: [
      ...
      {name:‘price‘, index:‘price‘,  formatter:‘integer‘, formatoptions:{thousandsSeparator: ‘,‘}},
      ...
   ]
...
});

formatter主要是设置格式化类型(integer、email等以及函数来支持自定义类型),formatoptions用来设置对应formatter的参数，jqGrid中预定义了常见的格式及其options：

integer

thousandsSeparator： //千分位分隔符,

defaulValue

number

decimalSeparator, //小数分隔符，如”.”

thousandsSeparator, //千分位分隔符，如”,”

decimalPlaces, //小数保留位数

defaulValue

currency

decimalSeparator, //小数分隔符，如”.”

thousandsSeparator, //千分位分隔符，如”,”

decimalPlaces, //小数保留位数

defaulValue,

prefix //前缀，如加上”$”

suffix//后缀

date

srcformat, //source的本来格式

newformat //新格式

email

没有参数，会在该cell是email加上： mailto:[email protected]

showlink

baseLinkUrl, //在当前cell中加入link的url，如”jq/query.action”

showAction, //在baseLinkUrl后加入&action=actionName

addParam, //在baseLinkUrl后加入额外的参数，如”&name=aaaa”

target,

idName //默认会在baseLinkUrl后加入,如”.action?id=1″。改如果设置idName=”name”,那么”.action?name=1″。其中取值为当前rowid

checkbox

disabled //true/false 默认为true此时的checkbox不能编辑，如当前cell的值是1、0会将1选中

select

设置下拉框，没有参数，需要和colModel里的editoptions配合使用

下面是一个使用的例子:

colModel:[
    {name:‘id‘,     index:‘id‘,     formatter:  customFmatter},
    {name:‘name‘,   index:‘name‘,   formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}},
    {name:‘price‘,  index:‘price‘,  formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}},
    {name:‘email‘,  index:‘email‘,  formatter: "email"},
    {name:‘amount‘, index:‘amount‘, formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},
    {name:‘gender‘, index:‘gender‘, formatter: "checkbox",formatoptions:{disabled:false}},
    {name:‘type‘,   index:‘type‘,   formatter: "select", editoptions:{value:"0:无效;1:正常;2:未知"}}
]

其中customFmatter声明如下：

function customFmatter(cellvalue, options, rowObject){
    console.log(cellvalue);
    console.log(options);
    console.log(rowObject);
    return "["+cellvalue+"]";
};

在页面显示的效果如下：

当然还得支持自定义formatter函数，只需要在formatter:customFmatter设置formatter函数，该函数有三个签名：

function customFmatter(cellvalue, options, rowObject){ 
 
}
//cellvalue - 当前cell的值
//options - 该cell的options设置，包括{rowId, colModel,pos,gid}
//rowObject - 当前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}

当然对于自定义formatter，在修改时需要获取原来的值，这里就提供了unformat函数，这里见官网的例子：

jQuery("#grid_id").jqGrid({
...
   colModel: [
      ...
      {name:‘price‘, index:‘price‘, width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
      ...
   ]
...
}); 
 
function imageFormat( cellvalue, options, rowObject ){
    return ‘</pre>
<img src="‘+cellvalue+‘"  />
<pre>‘;
}
function imageUnFormat( cellvalue, options, cell){
    return $(‘img‘, cell).attr(‘src‘);
}

5 常见错误问题：
chrome报错：

Uncaught TypeError: Cannot read property ‘integer’ of undefined

IE报错：

SCRIPT5007: 无法获取属性“integer”的值: 对象为 null 或未定义
出现这样的问题，是由于页面没有添加语言文件的引用导致的
解决办法为：添加语言文件js

<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
时间： 2024-10-16 23:16:23

jqGrid学习笔记的相关文章

jqGrid 学习笔记整理——终极篇（一）

jqGrid 学习笔记整理--终极篇(一) 本篇开始实现利用jqGrid框架实现 主从表 的显示效果及与后台交互的实例,使用的平台和上篇博文[jqGrid 学习笔记整理--进阶篇(二)](http://blog.csdn.net/dfs4df5/article/details/51108798)一致 也将使用上篇中的数据库和代码进行添加和修改,如果未看上篇的请先去看上篇,本篇不再重复贴出上篇出现的源码. 一.数据库部分 为了检索方便,这里建立了一个视图 关联两个表,设置为外键 最后如果有什么不清

jqGrid 学习笔记整理——进阶篇（二）

jqGrid 学习笔记整理--进阶篇(二 ) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2.创建表 双击打开上步创建数据库--右击T

JqGrid学习笔记（一）

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信.文档比较全面,其官方网址为:http://www.trirand.com. 一.jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数据

JqGrid学习笔记（二）

1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid表格,使用方式如下: $("#search_btn").click(function(){ //此处可以添加对查询数据的合法验证 var orderId = $("#orderId").val(); $("#list4").jqGrid('setGridParam',{ datatype:'json', postData:{

jqgrid学习笔记[转]

一.主要API接口getGridParam.setGridParam: getGridParam方法: getGridParam("url"): 获取当前的AJAX的URL getGridParam("sortname"):排序的字段 getGridParam("sortorder"):排序的顺序 getGridParam("selrow"):得到选中行的ID getGridParam("page"):当前

jQuery学习笔记--JqGrid相关操作 方法列表（上）

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详细,自己在看它的文档和代码时写了一些demo和笔记,还有它实现的原理记录一下 学习Caliburn.Micro要有MEF和MVVM的基础 先说一下他的命名规则和引导类 以后我会把Caliburn.Micro的 Actions IResult,IHandle ICondu

jQuery学习笔记（一）：入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开