Jquery使用JQgrid组件处理json数据

让我来详细讲解一下“Jquery使用JQgrid组件处理json数据”的完整攻略。

1. 什么是JQgrid

JQgrid是一款基于Jquery的表格插件，它可以帮助我们快速、方便地构建数据表格。JQgrid不仅可以处理静态数据，还支持处理数据库中返回的json数据。

2. JQgrid如何使用json数据

2.1 引入必要的库文件

在使用JQgrid之前，我们需要引入jQuery和JQgrid相关的库文件。可以通过以下方式引入：

<!--JQuery (必须)-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!--JQgrid-->
<script type="text/javascript" src="js/grid.base.js"></script>
<script type="text/javascript" src="js/grid.common.js"></script>
<script type="text/javascript" src="js/grid.formedit.js"></script>
<script type="text/javascript" src="js/grid.custom.js"></script>
<script type="text/javascript" src="js/grid.jqueryui.js"></script>

2.2 构建数据源

在使用JQgrid处理json数据之前，需要先定义json数据的数据源。构建方法如下：

var mydata = [
    {id: "1", name: "张三", age: "22", gender: "男"},
    {id: "2", name: "李四", age: "25", gender: "男"},
    {id: "3", name: "王五", age: "21", gender: "女"}
];

2.3 编写JQgrid的相关配置

构建表格需要编写JQgrid的配置信息。JQgrid的配置比较多，主要包括以下内容：

$("#jqGrid").jqGrid({
    // table id
    url: 'jsondata.php',
    datatype: "json",
    colModel: [
        {label: '序号', name: 'id', key: true, width: 75},
        {label: '姓名', name: 'name', width: 150},
        {label: '年龄', name: 'age', width: 150},
        {label: '性别', name: 'gender', width: 150}
    ],
    viewrecords: true,
    width: 780,
    height: 250,
    rowNum: 20,
    pager: "#jqGridPager",
    jsonReader: {
        root: "data",
        page: "page",
        total: "pages",
        records: "count",
        repeatitems: false,
        id: "0"
    }
});

其中，url指向数据源的接口地址，datatype表示数据类型，这里需要填写"json"；colModel定义表格的列信息；viewrecords为true时显示总条数；width、height分别设置表格的宽度和高度；rowNum表示显示的行数；pager指示表格的分页信息；jsonReader指定如何解析json数据。

2.4 与PHP后台交互

最后一步是与后台通过AJAX交互获取json数据。代码如下：

$.ajax({
    url: 'jsondata.php',
    dataType: 'json',
    success: function (data) {
        $("#jqGrid").jqGrid("clearGridData");
        $("#jqGrid").jqGrid("setGridParam", {data: data}).trigger("reloadGrid");
    }
});

其中，url指向json数据的接口地址，dataType为json，通过success获取返回的json数据，最终通过在JQgrid中设置数据的方式，将后台数据通过Jgrid显示在前端页面上。

3. 示例

以下是一个完整的示例，我们通过一个json文件url返回数据，将数据存储到数据源中：

$(document).ready(function(){
  var mydata = [
    {id: "1", name: "张三", age: "22", gender: "男"},
    {id: "2", name: "李四", age: "25", gender: "男"},
    {id: "3", name: "王五", age: "21", gender: "女"}
  ];

  $("#jqGrid").jqGrid({
    url: 'data.json',
    datatype: "json",
    colModel: [
      { label: '序号', name: 'id', key: true, width: 75 },
      { label: '姓名', name: 'name', width: 150 },
      { label: '年龄', name: 'age', width: 150 },
      { label: '性别', name: 'gender', width: 150 }
    ],
    viewrecords: true,
    width: 780,
    height: 250,
    rowNum: 20,
    pager: "#jqGridPager",
    jsonReader: {
      root: "data", 
      page: "page",
      total: "pages", 
      records: "count"
    }
  });

  $.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function(data) {
      $("#jqGrid").jqGrid("clearGridData");
      $("#jqGrid").jqGrid("setGridParam", {data: data}).trigger("reloadGrid");
    } 
  });
});

另外，我们还可以通过另外一种方式读取json数据（这里假设我们的json文件存放于本地），示例如下：

$(document).ready(function(){
  var mydata = [
    {id: "1", name: "张三", age: "22", gender: "男"},
    {id: "2", name: "李四", age: "25", gender: "男"},
    {id: "3", name: "王五", age: "21", gender: "女"}
  ];

  $("#jqGrid").jqGrid({
    data: mydata,
    datatype: "local",
    colModel: [
      { label: '序号', name: 'id', key: true, width: 75 },
      { label: '姓名', name: 'name', width: 150 },
      { label: '年龄', name: 'age', width: 150 },
      { label: '性别', name: 'gender', width: 150 }
    ],
    viewrecords: true,
    width: 780,
    height: 250,
    rowNum: 20,
    pager: "#jqGridPager",
    jsonReader: {
      root: "data", 
      page: "page",
      total: "pages", 
      records: "count"
    }
  });
});

以上就是使用JQgrid处理json数据的完整攻略，希望能对你有所帮助。