`

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 )
分享到:
评论

相关推荐

    jquery.jqGrid-4.5.2.zip

    《jQuery.jqGrid 4.5.2:构建高效数据网格的神器》 在Web开发领域,高效的数据展示和管理是不可或缺的一部分。jQuery.jqGrid 4.5.2作为一个强大的开源JavaScript插件,为开发者提供了强大的数据网格功能,使得在...

    jquery.jqGrid-4.4.3

    4. **数据编辑**:对于需要动态更新的数据,jqGrid支持行内编辑、弹出窗口编辑等多种编辑模式,方便用户进行数据修改。 5. **自定义列**:开发者可以根据需求自定义列的显示,包括列宽、标题、对齐方式等,甚至可以...

    jquery.jqGrid-4.5.4

    《jQuery.jqGrid-4.5.4:强大的表格数据管理插件》 jQuery.jqGrid 是一个基于 jQuery 的开源网格插件,主要用于在网页上展示和管理大量结构化的数据。版本4.5.4是这个插件的一个稳定版本,虽然在官网上可能无法找到...

    jqGrid-master

    jqGrid 是一个强大的JavaScript库,专门用于在Web页面上创建交互式的数据表格。这个"jqGrid-master"压缩包是该库的最新版本,从官方英文站点下载,为用户提供了便捷的获取途径。jqGrid主要用于展示和操作数据,尤其...

    jquery.jqGrid-4.3.3

    jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。 主要特点: -Full control with JavaScript API -Data returned from the server is XML -Simple configuration -Ability to load big ...

    jQuery tonytomov-jqGrid-v4.5.2 插件

    jQuery tonytomov-jqGrid-v4.5.2 是一个功能强大的JavaScript插件,用于在Web应用程序中创建可交互的数据网格。jqGrid是基于jQuery库的,它提供了丰富的功能,如数据排序、分页、搜索、编辑以及自定义列等,使开发者...

    jquery.jqGrid-3.5-beta

    《jQuery.jqGrid-3.5-beta:一个强大的数据管理框架》 在Web开发领域,高效的数据管理和展示是至关重要的。jQuery.jqGrid是这样一个工具,它为开发者提供了强大而灵活的数据网格解决方案。这个名为"jquery.jqGrid-...

    jqGrid-3.5.alfa-2

    jqGrid 是一个非常著名的 jQuery 插件,专用于创建数据密集型网格视图。这个"jqGrid-3.5.alfa-2"版本是截至2009年4月2日的最新版本,对于那些无法访问官方网站获取更新的用户来说,这是一个宝贵的资源。 jqGrid 的...

    jquery.jqGrid-4.4.5

    《jQuery.jqGrid-4.4.5:高效前端数据管理解决方案》 jQuery.jqGrid是基于jQuery的一个强大且功能丰富的Web数据网格组件,版本4.4.5是其历史上的一个重要里程碑,提供了对jQuery UI皮肤的完美支持,极大地提升了...

    jquery.jqGrid-4.1.2

    《jQuery.jqGrid-4.1.2:Web前端数据管理的艺术》 jQuery.jqGrid是Web开发领域中一个强大的数据网格插件,版本4.1.2代表着它在功能和性能上的成熟与完善。这款插件专为展示和操作大量结构化数据而设计,以其丰富的...

    jquery.jqGrid-4.0.0包

    《jQuery.jqGrid-4.0.0包详解:打造高效数据网格的利器》 jQuery.jqGrid是一款基于jQuery的开源插件,主要用于构建功能强大的数据网格,它在4.0.0版本中展现了更为成熟和完善的功能。这个版本是jQuery 4.0系列的...

    jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar

    jQuery.jqGrid是基于jQuery的开源数据网格插件,而jQuery UI则是提供了一系列可自定义的用户界面组件。本文将围绕"jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar"这一压缩包中的两个主要组件进行深入探讨。 首先,...

    free-jqgrid-4.15.5.tgz

    《免费版jqGrid 4.15.5详解——打造高效数据管理界面》 jqGrid是一款功能强大的JavaScript数据网格插件,广泛应用于Web应用程序中,用于展示和操作大量的结构化数据。本文将深入探讨free-jqgrid-4.15.5版本,此版本...

    jqGrid-5.1.0表格插件.rar

    jqGrid是一款功能强大的jQuery插件,专为创建交互式的、数据丰富的网格视图而设计。在5.1.0版本中,它提供了多种特性,使得Web开发者能够轻松地构建动态的表格,支持数据的检索、排序、筛选、编辑以及分页等功能。这...

    jquery.jqGrid-4.4.4.zip

    《jQuery.jqGrid 4.4.4:构建动态数据表格的强大工具》 jQuery.jqGrid 是一个基于 jQuery 的开源JavaScript库,专为创建功能丰富的、可交互的网格视图而设计。在版本 4.4.4 中,jqGrid 提供了强大的数据管理功能,...

    jquery.jqGrid-4.6.0

    这个压缩包“jquery.jqGrid-4.6.0”包含了该库的4.6.0版本,这是一个被广泛使用的稳定版本,提供了强大的数据网格功能,包括数据的检索、排序、过滤、编辑和分页。 首先,让我们详细了解jqGrid的核心组件: 1. **...

    jquery最好的插件jqGrid-3.4.2 学习资源

    jqGrid是一款基于jQuery的开源数据网格插件,版本3.4.2是其经典且广泛使用的版本。这个学习资源包含了所有必要的组件,帮助开发者深入了解和掌握jqGrid的强大功能。 首先,`jquery.js`是jQuery的核心库,它是jqGrid...

    jqGrid-3.2.zip

    jqGrid 是一个基于 jQuery 的开源网格插件,用于在网页上展示和操作表格数据。它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,使得开发者可以方便地创建交互性强的数据展示界面。这个"jqGrid-3.2...

Global site tag (gtag.js) - Google Analytics