开发者社区> 谷中仁> 正文

jqgrid addJSONData方法使用

简介: 对jqgrid的addJSONData的使用实践及总结。
+关注继续查看

吐槽

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

目标

要实现的是一个可垂直滚动的表格。大致如下
image

开工

接下来就是用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方法做个记录,方便自己也方便别人。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【飞桨PaddleHub】所有命令行使用方法
【飞桨PaddleHub】所有命令行使用方法
43 0
Dataset之babyboom.dat:babyboom.dat数据集的简介、安装、使用方法之详细攻略
Dataset之babyboom.dat:babyboom.dat数据集的简介、安装、使用方法之详细攻略
44 0
.Net利用Newtonsoft进行解析Json的快捷方法
现在异构系统之间的数据交换多采用Json格式 .Net如何快捷地解析Json和将Object转换成json呢? 1.利用Newtonsoft解析Json字符串 在百度上查找资料,利用Newtonsoft解析Json多是把Json转换成某一特定的Object,这样的不便之处是有事需要特意为了解析该json而写一个class,对一些不规范的的Json,难以用Object来转换的,用他们的方法就不叫难行得通了。
2127 0
mock 使用方法
安装 npm install mockjs 全局引入 main.js import "@/utils/mock"; 配置 src/utils/mock.
1356 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
10056 0
+关注
126
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载