jqgrid addJSONData方法使用

最新推荐文章于 2024-05-30 13:59:14 发布
最新推荐文章于 2024-05-30 13:59:14 发布
阅读量1.7k 收藏 1
点赞数 1
文章标签： javascript json ui ViewUI
原文链接：https://yq.aliyun.com/articles/558859
版权

吐槽

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

weixin_34343000
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqgrid ace 使用手册 技巧
03-06
jqgrid ace 使用手册
jqGrid专题：方法文档
weixin_30553837的博客
04-15 85
jqGrid方法: 方法名 参数 返回值 说明 addJSONData data none 使用传来的data数据填充表格。使用方法： var mygrid = jQuery(”#”+grid_id)[0]; var myjsongrid = eval(”(”+jsonresponse.r...
jQuery插件之【jqGrid】常用语法整理-【更新】
七步诗
05-04 1万+
jqGrid常用语法整理，包含数据获取、常用函数、触发事件等 jqGrid表格数据获取相关语法 获取表格所有数据 $("#grid").jqGrid("getRowData"); 根据行id获取表格单行数据 $("#grid").jqGrid("getRowData", rowid); 获取选中单行记录 $("#grid").jqGri...
使用JQgrid常用 （实战经常用）
weixin_43992119的博客
10-17 914
jqgrid参数 jqGrid参数 名称 类型 描述 默认值 可修改 url string 获取数据的地址     datatype string 从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside     mtype string ajax...
jqGrid利用addJSONData添加空白行时的问题
Leonardy的博客
02-01 1247
需求：点击页面上的行添加按钮，添加一行空白行。 这里我用的是$("#YourGridId")[0].addJSONData([{}]); 但是，添加时，发现并没有添加新行，而是把之前的数据都清空了，无论点击多少次，grid只有一行。 于是乎，一顿调查，最后发现原来是scroll这个属性。 如果scroll属性没有设置成true，就会发生上面的现象。 （记得哦，scroll:true） ...
jqgrid ajax reload,jquery – 应该替换使用的addJSONData jqGrid到setGridParam()和trigger(‘reloadGrid’)的用法？...
weixin_39648824的博客
08-05 301
我最近写了一个问题“jqGrid display default “loading” message when updating a table / on custom update”的答案。在写答案时我想：为什么他使用addJSONData()函数刷新网格中的数据，而不是相对于setGridParam()更改URL和相对于触发器(‘reloadGrid’)刷新jqGrid数据？在开始，我想推荐使...
jqgrid行编辑
热门推荐
09-15 2万+
ondblClickRow: function(id){ if(id && id !== lastsel){ var rowData = $("#jqGridId").jqGrid("getRowData", id); $('#jqGridId').jqGrid('restoreRow',lastsel); $('#jqGridId').jqGrid('editRow',id,{
jqGrid添加数据行addRowData慢解决
yangyikun0428的博客
04-03 2270
jqGrid是jquery的grid widget中, 功能比較完整的一個, api document也很完整。 開始的時候, 來測試一下 insert data 100筆740ms 很順 1,000筆 5.56s, 這開始有點慢了 ? 1 2 3 4 5 6 7 8 9 10 11...
jqgrid 加载本地数据local 如何分页
淘淘小窝
05-16 1万+
参考文章:http://stackoverflow.com/questions/5537728/jqgrid-pager-not-working-with-local-datatype 这个人的解答写的很好,只需要这么写 var grid = $('#table').jqGrid({ datatype: 'local', altRows: true, colModel: [
jqgrid本地加载分页_jqGrid分页加载json数据无法显示的问题
weixin_39844284的博客
12-19 157
版本：jqgrid-4.3.2html代码： 页面js代码：jQuery("#prdDetailTbl").GridUnload();jQuery("#prdDetailTbl").jqGrid({url:'getProductOrderDetails.do?prdBranchId='+prdBranchId,datatype: "json",colNames:['订单号','结算单价', '数量...
Jqgrid之设定Grid数据的两种方法-yellowcong
01-30 4176
grid设定数据的方式有两种，一种是通过addJSONData 这个函数，这个函数的好处是，可以不刷新表格，就直接给数据全局的修改了，第二种方式是，在初始化的时候，直接设定数据到表格上。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1090
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
【redis】Spring之RedisTemplate配置与使用
05-30 323
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1197
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 513
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
解决renren-fast地图使用echarts报错
最新发布
Start_t的博客
05-30 204
原因：renrenfast 框架 中 plugins预设了 echarts 插件（3.8.5），并且设置了 // 引入外部库, 无需webpack打包处理。如果引用自己安装的echarts 需要 注释掉build\webpack.base.conf.js 中 externals 的echarts。始终报错，无法安装自己定义的echarts版本（5.4.1），console.log出来是3.84。会提示以下错误或者其他。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 172
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React基础知识笔记
山雀的博客
05-29 823
react基础知识
jqgrid jqResize 怎么使用
06-11
要使用 jqResize 插件，你需要遵循以下步骤： 1. 在引入 jqGrid 的 JavaScript 文件之后，再引入 jqResize 插件的 JavaScript 文件： ```html <script src="path/to/jqGrid/js/jquery.jqGrid.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值