jqGrid学习笔记

Posted DiscretOrz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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。
 
 

本节介绍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:name@domain.com
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+\'" alt="" />
<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>

以上是关于jqGrid学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

jqGrid学习笔记

JqGrid学习笔记

学习笔记:python3,代码片段(2017)

Ace Admin 学习笔记

jqGrid filterToolbar():无法读取未定义的属性“length”

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段