jqGrid学习（9）数据

jqGrid可支持的数据类型：xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function (…)。
Json数据
需要定义jsonReader来跟服务器端返回的数据做对应，其默认值：

Java代码

jQuery("#gridid").jqGrid({
...
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows",
repeatitems: true,
cell:"cell"
}
},
...
});

jQuery("#gridid").jqGrid({
...
   jsonReader : {
     root: "rows",
     page: "page",
     total: "total",
     records: "records",
     repeatitems: true,
     cell: "cell",
     id: "id",
     userdata: "userdata",
     subgrid: {root:"rows", 
        repeatitems: true, 
       cell:"cell"
     }
   },
...
});

这样服务器端返回的数据格式：

Java代码

{
total: "xxx",
page: "yyy",
records: "zzz",
rows : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]
}

{ 
  total: "xxx", 
  page: "yyy", 
  records: "zzz",
  rows : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

jsonReader的属性

total	总页数
page	当前页
records	查询出的记录数
rows	包含实际数据的数组
id	行id
cell	当前行的所有单元格

* root
这个元素指明表格所需要的数据从哪里开始。

Java代码

jQuery("#gridid").jqGrid({
...
jsonReader : {root:"invdata"},
...
});

jQuery("#gridid").jqGrid({
...
   jsonReader : {root:"invdata"},
...
});

从服务器端返回数据格式为：

Java代码

{
total: "xxx",
page: "yyy",
records: "zzz",
invdata : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]
}

{ 
  total: "xxx", 
  page: "yyy", 
  records: "zzz",
  invdata : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

* page
* total
* records
定义翻页所需要的信息

Java代码

jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords"
},
...
});

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords"
   },
...
});

服务器端返回数据：

Java代码

{
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
invdata : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]
}

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},
      ...
  ]
}

* cell
当前行所包含的单元格数据

Java代码

jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
cell: "invrow"
},
...
});

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      cell: "invrow"
   },
...
});

从服务器端返回数据：

Java代码

{
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
invdata : [
{id:"1", invrow:["cell11", "cell12", "cell13"]},
{id:"2", invrow:["cell21", "cell22", "cell23"]},
...
]
}

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {id:"1", invrow:["cell11", "cell12", "cell13"]},
    {id:"2", invrow:["cell21", "cell22", "cell23"]},
      ...
  ]
}

* id
行id

Java代码

jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
cell: "invrow",
id: "invid"
},
...
});

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      cell: "invrow",
      id: "invid"
   },
...
});

从服务器端返回数据：

Java代码

{
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
invdata : [
{invid:"1", invrow:["cell11", "cell12", "cell13"]},
{invid:"2", invrow:["cell21", "cell22", "cell23"]},
...
]
}

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1", invrow:["cell11", "cell12", "cell13"]},
    {invid:"2", invrow:["cell21", "cell22", "cell23"]},
      ...
  ]
}

cell 可以设置为空字符串，id也可以设置为数字：

Java代码

jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
cell: "",
id: "0"
},
...
});

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      cell: "",
      id: "0"
   },
...
});

从服务器端返回：

Java代码

{
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
invdata : [
{"1","cell11", "cell12", "cell13"},
{"2",,"cell21", "cell22", "cell23"},
...
]
}

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {"1","cell11", "cell12", "cell13"},
    {"2",,"cell21", "cell22", "cell23"},
      ...
  ]
}

* repeatitems
指明每行的数据是可以重复的，如果设为false，则会从返回的数据中按名字来搜索元素，这个名字就是colModel中的名字：

Java代码

jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
...
});

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      repeatitems: false,
      id: "0"
   },
...
});

从服务器端返回数据：

Java代码

{
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
invdata : [
{invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},
{invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},
...
]
}

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},
    {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},
      ...
  ]
}

此例中，id属性值为“invid”。
一旦当此属性设为false时，我们就不必把所有在colModel定义的name值都赋值。因为是按name来进行搜索元素的，所以他的排序也不是按colModel中指定的排序结果。

Java代码

{
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
invdata : [
{invid:"1",invdate:"cell11", note:"somenote"},
{invid:"2", amount:"cell22", tax:"cell23", total:"2345"},
...
]
}

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1",invdate:"cell11", note:"somenote"},
    {invid:"2", amount:"cell22", tax:"cell23", total:"2345"},
      ...
  ]
}

用户数据（user data）
在某些情况下，我们需要从服务器端返回一些参数但并不想直接把他们显示到表格中，而是想在别的地方显示，那么我们就需要用到userdata标签。

Java代码

jsonReader: {
...
userdata: "userdata",
...
}

jsonReader: {
  ...
  userdata: "userdata",
  ...
}

从服务器端返回数据：

Java代码

{
total: "xxx",
page: "yyy",
records: "zzz",
userdata: {totalinvoice:240.00, tax:40.00},
rows : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]
}

{ 
  total: "xxx", 
  page: "yyy", 
  records: "zzz", 
  userdata: {totalinvoice:240.00, tax:40.00}, 
  rows : [ 
    {id:"1", cell:["cell11", "cell12", "cell13"]}, 
    {id:"2", cell:["cell21", "cell22", "cell23"]}, 
    ... 
  ] 
}

在客户端我们得到的数据为：

Java代码

userData = {totalinvoice:240.00, tax:40.00}

userData = {totalinvoice:240.00, tax:40.00}

在客户端我们可以有下面两种方法得到这些额外信息：
1. 使用 getGridParam 方法:

Java代码

jQuery("grid_id").getGridParam('userData')

jQuery("grid_id").getGridParam('userData')

2. 使用getUserData()方法

Java代码

jQuery("grid_id").getUserData()

jQuery("grid_id").getUserData()

如果想获得某个值则为：

Java代码

jQuery("grid_id").getUserDataItem( key )

posted on 2010-05-26 16:19 民工皇帝阅读(2355) 评论(0) 编辑收藏举报

刷新页面返回顶部

民工皇帝

民工皇帝

公告