jqGrid学习 ----------- 数据

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

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"
     }
   },
...
});

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

{ 
  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
  这个元素指明表格所需要的数据从哪里开始。

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

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

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

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

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

服务器端返回数据：

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

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

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

从服务器端返回数据：

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

* id
行id

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

从服务器端返回数据：

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

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

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

从服务器端返回：

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

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

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

从服务器端返回数据：

{ 
  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中指定的排序结果。

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

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

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

从服务器端返回数据：

{ 
  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"]}, 
    ... 
  ] 
}

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

userData = {totalinvoice:240.00, tax:40.00}

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

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

2. 使用getUserData()方法

jQuery("grid_id").getUserData()

如果想获得某个值则为：

jQuery("grid_id").getUserDataItem( key )

评论

1 楼 waterenjoy 2011-04-18  

谢谢，好东西，
{"2",,"cell21", "cell22", "cell23"},是不是多了个,

为了帮你顶，我做了N久小测试....