您的位置: 首页  >  文章  >  jqgrid addJSONData方法使用

jqgrid addJSONData方法使用

分类: 文章 • 2024-06-07 16:22:28

吐槽

写这篇文章的目的是记录一下jqgrid.addJSONData的使用方法；因为使用addRowData要循环写入效率太低，没搜到相关的示例， so.....。最近工作中接到一个功能，要做地图和表格，对于用惯了Bootstrap、antd 的我来说, jqgrid是什么鬼，看了看官网，jqgrid提供的属性和方法太多了，应该定制型非常强，所以有辣么多银还在用这个强大的库吧。因为涉及稿还没来，那就研究研究基本功能。在此，对使用jsp做开发的不不禁的崇拜啊，页面布局 table 套 table .....

目标

要实现的是一个可垂直滚动的表格。大致如下
jqgrid addJSONData方法使用

开工

接下来就是用jqgrid的addJSONData实现数据加载。

  1. 新建html页并引入所需的样式和脚本

    <!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../js/bootstrap/css/bootstrap.css">
    <script src="../../../js/bootstrap/js/bootstrap.js"></script>
    <link type="text/css" rel="stylesheet" href="../../../js/jqgrid/ui.jqgrid.css" />
    <link type="text/css" rel="stylesheet" href="../../../js/jqgrid/ui.jqgrid-bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="../../../js/jqgrid/ui.jqgrid-bootstrap-ui.css" />
    <script type="text/javascript" src="../../../js/jqgrid/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="../../../js/jqgrid/i18n/grid.locale-cn.js"></script>
    <title>Document</title>
 </head>

<body>
    <table id="table_list"></table>
    <script>
     
    </script>
</body>

</html>

  2. jqgrid无数据示例化

    $("#table_list").jqGrid({
              datatype: "json", //请求数据返回的类型。可选json,xml,txt
              colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], //jqGrid的列显示名字
              colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
                  {
                      name: 'id',
                      index: 'id',
                      width: 55
                  },
                  {
                      name: 'invdate',
                      index: 'invdate',
                      width: 90
                  },
                  {
                      name: 'name',
                      index: 'name asc, invdate',
                      width: 100
                  },
                  {
                      name: 'amount',
                      index: 'amount',
                      width: 80,
                      align: "right"
                  },
                  {
                      name: 'tax',
                      index: 'tax',
                      width: 80,
                      align: "right"
                  },
                  {
                      name: 'total',
                      index: 'total',
                      width: 80,
                      align: "right"
                  },
                  {
                      name: 'note',
                      index: 'note',
                      width: 150,
                      sortable: false
                  }
              ],
              rowNum: 10, //一页显示多少条
              sortname: 'id', //初始化的时候排序的字段
              sortorder: "desc", //排序方式,可选desc,asc
              caption: "JSON Example" //表格的标题名字
          });

  3. 表格数据组织

  4. jsonArr = [{

                  "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
          {
              "id": "13",
              "invdate": "2007-10-06",
              "name": "Client 3",
              "amount": "1000.00",
              "tax": "0.00",
              "total": "1000.00",
              "note": null,
              "x": 100,
              y: 546
          },
      ];

  5. addJSONData调用

    $("#table_list")[0].addJSONData(jsonArr);
  6. 效果
    jqgrid addJSONData方法使用

代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../../../js/jquery.min.js"></script>
  <link rel="stylesheet" href="../../../js/bootstrap/css/bootstrap.css">
  <script src="../../../js/bootstrap/js/bootstrap.js"></script>
  <link type="text/css" rel="stylesheet" href="../../../js/jqgrid/ui.jqgrid.css" />
  <link type="text/css" rel="stylesheet" href="../../../js/jqgrid/ui.jqgrid-bootstrap.css" />
  <link type="text/css" rel="stylesheet" href="../../../js/jqgrid/ui.jqgrid-bootstrap-ui.css" />
  <script type="text/javascript" src="../../../js/jqgrid/jquery.jqGrid.min.js"></script>
  <script type="text/javascript" src="../../../js/jqgrid/i18n/grid.locale-cn.js"></script>
  <title>Document</title>
</head>

<body>
  <table id="table_list"></table>
  <script>
      $(function () {
          //页面加载完成之后执行
          pageInit();
      });
      function pageInit() {
          //创建jqGrid组件
          $("#table_list").jqGrid({
              datatype: "json", //请求数据返回的类型。可选json,xml,txt
              colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], //jqGrid的列显示名字
              colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
                  {
                      name: 'id',
                      index: 'id',
                      width: 55
                  },
                  {
                      name: 'invdate',
                      index: 'invdate',
                      width: 90
                  },
                  {
                      name: 'name',
                      index: 'name asc, invdate',
                      width: 100
                  },
                  {
                      name: 'amount',
                      index: 'amount',
                      width: 80,
                      align: "right"
                  },
                  {
                      name: 'tax',
                      index: 'tax',
                      width: 80,
                      align: "right"
                  },
                  {
                      name: 'total',
                      index: 'total',
                      width: 80,
                      align: "right"
                  },
                  {
                      name: 'note',
                      index: 'note',
                      width: 150,
                      sortable: false
                  }
              ],
              rowNum: 10, //一页显示多少条
              sortname: 'id', //初始化的时候排序的字段
              sortorder: "desc", //排序方式,可选desc,asc
              caption: "JSON Example" //表格的标题名字
          });
          let jsonArr = [{
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
              {
                  "id": "13",
                  "invdate": "2007-10-06",
                  "name": "Client 3",
                  "amount": "1000.00",
                  "tax": "0.00",
                  "total": "1000.00",
                  "note": null,
                  "x": 100,
                  y: 546
              },
          ];
          $("#table_list")[0].addJSONData(jsonArr);
      }
  </script>
</body>

</html>

总结

不折腾，永远都不知道过去、现在和以后都是什么样。
使用jqgrid的addRowData或者addJSONData方法， 再结合clearGridData方法，我们可以很轻松的随生成的表格做重绘，实时更新数据。
在此对jqgrid的addJSONData方法做个记录，方便自己也方便别人。

相关推荐