首页 文章 精选 留言 我的

jqgrid addJSONData方法使用

2018-03-20 885

吐槽

写这篇文章的目的是记录一下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方法做个记录，方便自己也方便别人。

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/558859

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

[java]String、StringBuffer、StringBuilder简记

String 字符串常量，字符串长度不可变。Java中String是immutable的。 StringBuffer 线程安全； StringBuilder 线程非安全； String 类型和StringBuffer的主要性能区别：String是不可变的对象, 因此在每次对String 类型进行改变的时候，都会生成一个新的 String 对象，然后将指针指向新的 String 对象，所以经常改变内容的字符串最好不要用 String ，因为每次生成对象都会对系统性能产生影响，特别当内存中无引用对象多了以后， JVM 的 GC 就会开始工作，性能就会降低。 使用 StringBuffer 类时，每次都会对 StringBuffer 对象本身进行操作，而不是生成新的对象并改变对象引用。所以多数情况下推荐使用 StringBuffer ，特别是字符串对象经常改变的情况下。 在大部分情况下，StringBuilder > StringBuffer。这主要是由于前者不需要考虑线程安全。
2018-03-21
614
上一篇

相关文章

发表评论

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-12 大小: 211.28KB 下载: 54次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Redis SpringBoot4 OpenAi Nacos3 Rocky SpringCloud Kubernetes Gemini3 Jdk25 Docker DeepSeek HarmonyOS6 Service Mesh

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册