当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

jqGrid基本用法与示例

发表于: 2013-10-09   作者:songchuanlu   来源:转载   浏览次数:
摘要: 一、jqGrid的基本用法   1、html页面   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

一、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基本用法与示例

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中,Jqgrid的特点是非常鲜明的。 特点如下:
Jqgrid入门-显示基本的表格(一) 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中,Jqgrid
首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中,Jqgrid的特点是非常鲜明的。 特点如下:
首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中,Jqgrid的特点是非常鲜明的。 特点如下:
5 JQGrid
JqGrid文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs JqGrid Demo:http:/
6 jqGrid
前段时间做了个小项目,用到了jqgrid,jqgrid看起来还是很强大的,通过一些配置既可以实现对数据的
一、msf> show exploits与msf> show payloads:这两条命令用于展示Metaploit目录中所有可用的
printFinal是一个基于jQuery的打印插件,支持打印预览,使用很简单,废话不多多说,直接上代码。 &l
本人github账号:https://github.com/pingfanren,喜欢的朋友可以给我点星。 Git是目前最先进的分布
sysstat是一个软件包,包含监测系统性能及效率的一组工具,这些工具对于我们收集系统性能数据,比如
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号