jqGrid使用经验分享(一)——jqGrid简单使用、json格式和jsonReader介绍

  广大的读者朋友们大家好,很高兴又可以在博客中和大家分享我的开发经验了。

  此次,我准备向大家介绍一个非常好用的jQuery表格插件——jqGrid。

  如果您在实际项目中遇到web端表格展示功能的需求,又不知道到底该使用那种技术实现时,jqGrid绝对是您的不二之选。

  如果您已经决定使用jqGrid技术完成项目中表格展示功能,又苦于没有详细的使用说明迟迟不能实际开发时,本系列博客绝对是您的不二之选。

  本篇博客将为大家介绍一下内容:

  1.   jqGrid简单使用;
  2.   jqGrid常用选项具体含义简介;
  3.   jqGrid使用json数据格式,以及jsonReader和repeatitems配合使用时json格式的实际变化。

首先,为大家展示一个非常简单Demo。使用jqGrid绘制一张表格

显示效果:

HTML:

1 ...
2 <table id="list2"></table>
3 <div id="pager2"></div>

JavaScript:  

 1 ...
 2 jQuery("#list2").jqGrid({
 3        url:‘server.php?q=2‘,
 4     datatype: "json",
 5        colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
 6        colModel:[
 7            {name:‘id‘,index:‘id‘, width:55},
 8            {name:‘invdate‘,index:‘invdate‘, width:90},
 9            {name:‘name‘,index:‘name asc, invdate‘, width:100},
10            {name:‘amount‘,index:‘amount‘, width:80, align:"right"},
11            {name:‘tax‘,index:‘tax‘, width:80, align:"right"},
12            {name:‘total‘,index:‘total‘, width:80,align:"right"},
13            {name:‘note‘,index:‘note‘, width:150, sortable:false}
14        ],
15        rowNum:10,
16        rowList:[10,20,30],
17        pager: ‘#pager2‘,
18        sortname: ‘id‘,
19     viewrecords: true,
20     sortorder: "desc",
21     caption:"JSON Example"
22 });
23 jQuery("#list2").jqGrid(‘navGrid‘,‘#pager2‘,{edit:false,add:false,del:false});

下面为大家详细介绍一下上面绘制表格中,jqGrid具体选项的含义。

  • url:这个参数指定了jqGrid从服务器获取数据的请求。
  • datatype:这个参数指定了jqGrid调用的数据的格式,常用格式有json,xml,local。
  • colName:这个参数指定了jqGrid每列的title,按顺序依次排列,并且可以看出实际上它就是一个字符串数组。
  • colModel:这个参数指定了jqGrid各列的具体格式,"name"指定对应数据中属性名,“index”用于列排序,“width”显然是指定列宽,“align”对齐方式,“sortable”指定是否支持排序。其实上面每一个设置基本见名知意,大家可以大胆使用。(注意:colName与colModel 需要一一对应)
  • rowNum:这个参数指定了jqGrid显示行数,默认值20。
  • rowList:这个参数指定了jqGrid可以接受的rowNum值,如[10,20,30]。实际上它也仅仅是一个数组。
  • pager:这个参数指定了jqGrid页脚显示位置。
  • sortname:这个参数指定了jqGrid默认的排序列,可以是列名也可以是数字。
  • viewrecords:这个参数设置了是否在Pager Bar显示所有记录的总数。
  • sortorder:这个参数指定了jqGrid默认排序列的默认排序方式。
  • caption:这个参数制订了jqGrid的标题,如果设置了,则将显示在Grid的Header层。

以上仅仅是最最常用的,最最简单的选项含义,jqGrid还提供了大量选项方便大家使用,如果读者朋友们需要小编会在今后的博客中专门介绍一下jqGrid选项。

相信有很多读者朋友希望了解到底jqGrid使用的json以什么样的格式呈现,下面就为大家展示一下上面表格中使用的json数据:

 1 {"page":"1","total":2,"records":"13",
 2 "rows":[
 3 {"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},
 4 {"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},
 5 {"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},
 6 {"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},
 7 {"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},
 8 {"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},
 9 {"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},
10 {"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},
11 {"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},
12 {"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}
13 ],
14 "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}

看到jqGrid实际调用的json格式以后,很多读者朋友会产生疑问。是否只有符合上面格式的json数据才能被jqGrid解析?

答案是:否定的

这里就不得不介绍一下jqGrid的一个重要的选项jsonReader,jsonReader用于设置如何解析从Server端发回来的json数据。上面表格之所以能够成功解析出来得益于,jsonReader的默认设置。

jsonReader默认设置:

 1 jsonReader : {
 2     root: "rows",    // json中代表实际模型数据的入口
 3     page: "page",    // json中代表当前页码的数据
 4     total: "total",    // json中代表页码总数的数据
 5     records: "records", // json中代表数据行总数的数据
 6     repeatitems: true, // 如果设为false,则jqGrid在解析json时,会根据name来搜索对应的数据元素(即可以json中元素可以不按顺序);而所使用的name是来自于colModel中的name设定。
 7     cell: "cell",
 8     id: "id",
 9     userdata: "userdata",
10     subgrid: {
11         root:"rows",
12         repeatitems: true,
13         cell:"cell"
14     }
15 }

如果Server端返回的json数据不太符合默认设置(比如内容结构不同)那么就有必要修改这一设置。

通常jsonReader和repeatitems是配合使用的,如果repeatitems为false,json 中数据可以乱序,并且允许数据空缺。jqGrid会根据colModel中name属性和json数据对应,根据属性名称进行解析。

repeatitems为true时:

1     ...
2     jsonReader : {
3         root:"rows",
4         page: "page",
5         total: "total",
6         records: "records"
7     },
8     ...

json结构:

 1 {
 2     "page": "xxx",
 3     "total": "yyy",
 4     "records": "zzz",
 5     "rows" : [
 6                  {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},    // cell中不需要各列的name,但是需要与colModel一一对应
 7                  {"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
 8                  ...
 9     ]
10 }

repeatitems为false时:

1     ...
2     repeatitems: false,
3     jsonReader : {
4         root:"rows",
5         page: "page",
6         total: "total",
7         records: "records"
8     },
9     ...

json结构:

 1 {
 2     "page" : "xxx",
 3     "total" : "yyy",
 4     "records" : "zzz",
 5     "rows" : [
 6          {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 数据中需要各列的name,但是可以不按列的顺序
 7          {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
 8          ...
 9     ]
10 }

  非常感谢大家能坚持阅读完本篇博客。

  小编深知一篇博客不能完全介绍jqGrid的众多细节,所以会在今后的博客中不断介绍jqGrid的其他细节。

  小编希望可以通过博客将自己在jqGrid使用时遇到的各种各样的问题和解决方案分享给广大读者朋友们,希望可以帮助大家快速学习jqGrid,避免在不必要的细节上浪费大量时间。

  另外如果有读者朋友和小编一样对jqGrid十分偏爱,可以在评论区和小编一起讨论jqGrid的许许多多优缺点,并一起讨论相关解决方案。

  

  ***************************

  非常感谢读者朋友们对小编的支持,小编非常开心可以和大家分享我的开发经验。

  如果我的经验可以帮助到读者朋友们,是小编最大的动力和荣幸。

  蒋继发

  大连理工大学

  2014-10-17 11:26:01

  ***************************

时间: 2024-10-09 21:26:31

jqGrid使用经验分享(一)——jqGrid简单使用、json格式和jsonReader介绍的相关文章

简单创建json格式文件

简单创建json格式文件 核心就两点: addProperty 添加属性(也就是加键值对) add是添加 另外的object对象 然后直接toString()输出 核心代码如下; public class CreateJson { public static void main(String[] args) { JsonObject object= new JsonObject(); object.addProperty("cat", "it"); JsonArra

在VS2013下编译json-c库,并简单生成json格式数据

#include "stdafx.h"#include "json-c/json.h" int _tmain(int argc, _TCHAR* argv[]){ // 正常的json格式 json_object *json = json_object_new_object(); json_object_object_add(json, "name", json_object_new_string("laomeng")); j

Json格式循环遍历,Json数组循环遍历

Json格式数据如何遍历,这里我们可以用for..in实现 例如最简单的json格式 var json1 = { 'name' : '小钻风' , 'age' : 25 , 'handsome' : 'yes' }; for( var key in json1 ){ console.log( key+' : '+json1[key] ); } 再来个升级版的,如下 var json1 = { 'name' : ['echo' , '小钻风' , '妈卖批' , '小白兔'], 'age' : [

Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

分享一套简单的CodeSmith三层模板

Model: <%@ Template Language="C#" TargetLanguage="C#" %> <%@ Assembly Name="SchemaExplorer" %> <%@ Import Namespace="SchemaExplorer" %> <%@ Property Name="SourceTable" Type="Schem

一个简单的json数组解析(阿里巴巴)

最近工作中遇到了json字符串解析的问题,但是项目中是有限制的,只能引用阿里巴巴和simple jar,所以我选择了Alibaba的jar,由于很长时间没用过json的东西了,有些淡忘,不免工作中遇到了会花费些许时间再去重拾记忆,所以写了一个简单的JSON 字符串数组的解析实例,仅此作为笔记,以后遇到了可以直接看一下,或许可以节省一时片刻的时间,时间就是金钱,就是生命,就是自信,就是信任... /** * */package com.test.pac1; import java.util.Arr

为您的Web项目构建一个简单的JSON控制器

摘要:无论您的项目使用的是哪种数据库后端,JavaScript Object Notation (JSON) 控制器都能简化您的开发工作.本文将带领您建立一个能够增强您的下一个开发项目的非常基础的 JSON 控制器. 您的下一个 PHP/MySQL 项目可能与您最近完成的十几个项目类似:建立一个 MySQL 数据库,创建包含 HTML 的 PHP 视图,根据需要添加 JavaScript 代码和 CSS 文件,连接到数据库,从数据库提取内容来填充视图,等等.如果您熟悉 web 开发,您一定知道分

iOS开发-简单解析JSON数据

什么是JSON ? JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) ? JSON的格式很像OC中的字典和数组 ? {"name" : "Jack", "age" : 10} {"name" : ["jack", "rose", "jim"]} ? 标准JSON格式的注意点: key必须用双

超简单的处理JSON格式和JSON数组格式的String

现在网站上有不少处理JSON格式的工具类,但是我找了一天,发现大都是需要编写相应对象类来进行处理,比较麻烦,比如:Gson,json-lib.Gson,json-lib这些处理那些接口之类的参数名字和个数固定的json格式那是杠杠的,没得说.但是我要做的是用来处理测试数据文件,测试数据文件偏偏是参数名字,个数都不固定,而且我写的Groovy脚本只能是一个文件,要是使用Gosn之类的话,就得每个测试文件都要写一个内部类,麻烦不说,重用性还低. 最后发现有个工具类处理这种参数个数或名称不固定的Str