jqGrid学习笔记

时间：2016-11-19 20:53:14 阅读：312 评论：0 收藏：0 [点我收藏+]

标签：highlight jquery插件 cannot 显示 top 更换配置 rownumber 元素

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

一、jqGrid特性：

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

二、jqGrid使用方式：

1.下载文件

下载jqGrid的软件包，目前最新版本为4.4.1 下载地址为：http://www.trirand.com/blog/?page_id=6
下载jQuery文件，目前最新版本为1.8.2 下载地址为：http://code.jquery.com/jquery-1.8.2.min.js
下载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: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+‘"  />
<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学习笔记

标签：highlight jquery插件 cannot 显示 top 更换配置 rownumber 元素

原文地址：http://www.cnblogs.com/zjITgrow/p/6081208.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

jqGrid学习笔记

一、jqGrid特性：

二、jqGrid使用方式：

1.下载文件

2.准备文件

3.页面中得代码

3.1、head中加入引用

css文件引入：

js文件引入：

3.2、body中的代码

3.3、js中的代码

1 刷新jqGrid数据。

2 无数据的提示信息。

3 显示jqGrid统计信息。

代码片段：

详细介绍：

4 jqGrid的数据格式化。

5 常见错误问题：

chrome报错：

IE报错：