jqGrid的使用笔记：4. 数据操作

最新推荐文章于 2022-01-28 17:25:21 发布
最新推荐文章于 2022-01-28 17:25:21 发布
阅读量178 收藏
点赞数
分类专栏： jqGrid jquery 文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_8216/article/details/82487387
版权
[b]数据类型[/b]
xml， json， jsonp， array， xmlstring， jsonstring， script， function (…)

xml类型默认解析如下： 

jQuery("#gridid").jqGrid({
...
   xmlReader : { 
      root: "rows", 
      row: "row", 
      page: "rows>page", 
      total: "rows>total", 
      records : "rows>records", 
      repeatitems: true, 
      cell: "cell", 
      id: "[id]",
      userdata: "userdata",
      subgrid: { 
         root:"rows", 
         row: "row", 
         repeatitems: true, 
         cell:"cell" 
      } 
   },
...
});


json数据默认解析如下： 

jQuery("#gridid").jqGrid({
...
   jsonReader : { 
      root: "rows", 
      page: "page", 
      total: "total", 
      records: "records", 
      repeatitems: true, 
      cell: "cell", 
      id: "id",
      userdata: "userdata",
      subgrid: { 
         root:"rows", 
         repeatitems: true, 
         cell:"cell" 
      } 
   },
...
});


[b]XML数据[/b]
XML数据解析时有几个重要的元素：root, row, page, total, records, repeattimes, cell,id
举个例子： 

......
<invoices> 
   <request>true</request> 
   ... 
   <currentpage>1</currentpage> // page
   <totalpages>10</totalpages> //total 
   <totalrecords>20</totalrecords> //records

   <result>  // root
      <invoice asin='12345'>       // id

         // 都是用 <invcell></invcell>， repeateitems: true

         <invcell>data1</invcell>  // cell
         <invcell>data2</invcell> 
         <invcell>data3</invcell> 
         <invcell>data4</invcell> 
         <invcell>data5</invcell> 
         <invcell>data6</invcell> 

      </invoice> 
      ... 
   </result> 
</invoices>


使用js解析时： 

jQuery("#gridid").jqGrid({
...
   xmlReader: { 
      root:"result", 
      row:"invoice",
      page:"invoices>currentpage", 
      total:"invoices>totalpages", 
      records:"invoices>totalrecords",
      repeatitems:true,
      cell:"invcell",
      id : "[asin]"
  },
...
});


如果XML结构如下： 

... 
<invoices> 
   <request>true</request> 
   ... 
   <currentpage>1</currentpage>
   <totalpages>10</totalpages>
   <totalrecords>20</totalrecords>
   <result> 
      <invoice> 
         // 以下TAG不同，这repeatitems: false
         <asin>12345</asin>
         <invoiceno>data1</invoiceno>
         <invoicedate>data2</invoicedate> 
         <invoiceamount>data3</invoiceamount> 
         <invoicetax>data4</invoicetax> 
         <invoicetotal>data5</invoicetotal> 
         <notes>data6</notes> 
      </invoice> 
      ... 
   </result> 
</invoices>


js源码： 

jQuery("#gridid").jqGrid({
...
   xmlReader: { 
      root:"result", 
      row:"invoice",
      page:"invoices>currentpage", 
      total:"invoices>totalpages", 
      records:"invoices>totalrecords",
      repeatitems:false,
      id : "asin"
  },
...
});

and our colModel from the example should look like this:

<code javascript>
jQuery("#gridid").jqGrid({
...
   // 作个XML TAG和 colModel的映射关系
   // 如果不作映射关系，name的值必须是xml里的tag名称。
   colModel :[ 
      {name:'invid', index:'invid', width:55, xmlmap:"invoiceno"}, 
      {name:'invdate', index:'invdate', width:90, xmlmap:"invoicedate"}, 
      {name:'amount', index:'amount', width:80, align:'right', xmlmap:"invoiceamount"}, 
      {name:'tax', index:'tax', width:80, align:'right', xmlmap:"invoicetax"}, 
      {name:'total', index:'total', width:80, align:'right', xmlmap:"invoicetotal"}, 
      {name:'note', index:'note', width:150, sortable:false, xmlmap:"notes"} 
   ],
   xmlReader: { 
      root:"result", 
      row:"invoice",
      page:"invoices>currentpage", 
      total:"invoices>totalpages", 
      records:"invoices>totalrecords",
      repeatitems:false,
      id : "asin"
  },
...
});


[b]xml string[/b] 

<script>
var mystr =
"<?xml version='1.0' encoding='utf-8'?>
<invoices>
    <rows>
        <row>
            <cell>data1</cell>
            <cell>data2</cell>
            <cell>data3</cell>
            <cell>data4</cell>
            <cell>data5</cell>
            <cell>data6</cell>    
        </row>
    </rows>
</invoices>";

jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    datatype: 'xmlstring',
    datastr : mystr,
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55, sorttype:'int'}, 
      {name:'invdate', index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'}, 
      {name:'amount', index:'amount', width:80, align:'right', sorttype:'float'}, 
      {name:'tax', index:'tax', width:80, align:'right', sorttype:'float'}, 
      {name:'total', index:'total', width:80, align:'right', sorttype:'float'}, 
      {name:'note', index:'note', width:150, sortable:false} ],
    pager: '#pager',
    rowNum:10,
    viewrecords: true,
    caption: 'My first grid'
  }); 
}); 
</script>


[b]数据类型：json, jsonp, (jsonstring)[/b]
主要数据元素：root, page, total,records, row, cell, id, repeatitems,

默认的JS结构： 

jQuery("#gridid").jqGrid({
...
   jsonReader : {
     root: "rows",
     page: "page",
     total: "total",
     records: "records",
     repeatitems: true,
     cell: "cell",
     id: "id",
     userdata: "userdata",
     subgrid: {root:"rows", 
        repeatitems: true, 
       cell:"cell"
     }
   },
...
});


json的数据结构： 

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}


repeatitems的使用： 

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      repeatitems: false,
      id: "0"
   },
...
});


json： 

{ 
  "totalpages" : "xxx", 
  "currpage" : "yyy",
  "totalrecords" : "zzz",
  "invdata" : [
    {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"},
    {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
      ...
  ]
}


[b]json string[/b]
colModel: 

jQuery("#gridid").jqGrid({
...
 colModel:[
   {name:'name',label:'Name', width:150,editable: true},
   {name:'id',width:50, sorttype:"int", editable: true,formatter:strongFmatter},
   {name:'email',label:'Email', width:150,editable: true,formatter:'email'},
   {name:'stock',label:'Stock', width:60, align:"center", editable: true,formatter:'checkbox',edittype:"checkbox"},
   {name:'item.price',label:'Price', width:100, align:"right", editable: true,formatter:'currency'},
   {name:'item.weight',label:'Weight',width:60, align:"right", editable: true,formatter:'number'},
   {name:'ship',label:'Ship Via',width:90, editable: true,formatter:'select', edittype:"select",editoptions: value:"2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX"}},      
   {name:'note',label:'Notes', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}      
 ],
...
});


json string: 

{
   "page":"1",
   "total":2,
   "records":"13", 
   "rows":[ 
      {"id":"12345","name":"Desktop Computers","email":"josh@josh.com","item":{"price":"1000.72", "weight": "1.22" }, "note": "note", "stock": "0","ship": "1"}, 
      {"id":"23456","name":"<var>laptop</var>","note":"Long text ","stock":"yes","item":{"price":"56.72", "weight":"1.22"},"ship": "2"},
      {"id":"34567","name":"LCD Monitor","note":"note3","stock":"true","item":{"price":"99999.72", "weight":"1.22"},"ship":"3"},
      {"id":"45678","name":"Speakers","note":"note","stock":"false","ship":"4"} 
    ] 
}


[b]jsonReader as function[/b] 

jsonReader: {
    repeatitems: false,
    id: "Id",
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

此处的 obj 是从服务端服务器的response。

[b] Array Data[/b]
相关的配置：datatype
colModel的相关选项： sorttype, datefmt
相关的方法：getRowData, delRowData, setRowData, addRowData, updateGridRows 

localReader = {
   root: "rows",
   page: "page",
   total: "total",
   records: "records",
   repeatitems: false,
   cell: "cell",
   id: "id",
   userdata: "userdata",
   subgrid: {root:"rows", repeatitems: true, cell:"cell"}
}


js 

...
<script>
jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({
        datatype: 'clientSide',
        colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
        colModel :[ 
        {name:'invid',index:'invid', width:55, sorttype:'int'}, 
        {name:'invdate',index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'}, 
        {name:'amount',index:'amount', width:80, align:'right',sorttype:'float'}, 
        {name:'tax',index:'tax', width:80, align:'right',sorttype:'float'}, 
        {name:'total',index:'total', width:80,align:'right',sorttype:'float'}, 
        {name:'note',index:'note', width:150, sortable:false} ],
        pager: '#pager',
        rowNum:10,
        viewrecords: true,
        caption: 'My first grid'
   }); 
...
}); 
</script>


语法：
1. jQuery("#grid_id").addRowData( rowid, data, position, srcrowid );
position: 增加数据的位置：first, last, before or after. 1） first：增加在最前面，2）last：增加在最后面，3） before”，“after” srcrowid参数的前面或后面。
srcrowid: 和position中的“before”，“after”配合使用。 

<script>
...
var myfirstrow = {invid:"1", invdate:"2007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"};
jQuery("#list").addRowData("1", myfirstrow);
...
</script>


2. jQuery("#grid_id").getRowData( rowid ); 

jQuery("#list").getRowData( "1" );

返回的数据：
{invid:"1", invdate:"2007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"};


3. jQuery("#grid_id").delRowData( rowid ); 

jQuery("#list").delRowData( "2" );


4. jQuery("#grid_id").setRowData( rowid, data ); 

jQuery("#list").setRowData( "1", { tax:"5", total:"205" });


[b]Function[/b] 

<script type="text/javascript">
...
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    datatype: function(postdata) {
        jQuery.ajax({
           url: 'example.php',
           data:postdata,
           dataType:"xml",
           complete: function(xmldata,stat){
              if(stat=="success") {
                 var thegrid = jQuery("#list")[0];
                 thegrid.addXmlData(xmldata.responseXML);
              }
           }
        });
    },
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {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} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid'
  }); 
}); 
...
</script>


[b]User Data[/b] 

jsonReader: {
  ...
  userdata: "userdata",
  ...
}


xml 

<invoices>  
    <request>true</request>  
    <userdata name="totalinvoice"> 240.00 </userdata>   // userdata
    <userdata name="tax"> 40.00</userdata>  // userdata
    ... 
    <result>  
      <row>  
        <cell>data1</cell>
        <cell>data2</cell>
        <cell>data3</cell>
        <cell>data4</cell>
        <cell>data5</cell>
        <cell>data6</cell>
      </row>
      ... 
    </result> 
</invoices>


json 

{ 
  total: "xxx", 
  page: "yyy", 
  records: "zzz", 
  userdata: {totalinvoice:240.00, tax:40.00},  // userdata
  rows : [ 
    {id:"1", cell:["cell11", "cell12", "cell13"]}, 
    {id:"2", cell:["cell21", "cell22", "cell23"]}, 
    ... 
  ] 
}


获取userdata的方法:
jQuery("grid_id").jqGrid('getGridParam', 'userData')
iteye_8216
关注
专栏目录
jqGrid 各种参数 详解
web开发自学
05-09 3260
JQGrid JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。在这里，可以知道jqgrid可以做什么事情。 下面是转自其他人blog的一个学习资料，与其说是学习资料，说成查询帮助文档更加合适。 jqGrid学习之 ------------- 安装 jqGrid安装很简单，只需把相应的c...
jqGrid 排序和treeGird
序猿
02-25 1886
这两天被jqGrid和treeGrid折腾的半死，本来很简单的配置，sortable:true，就能解决的排序的问题，但是我怎么配置都是不行，最后直接调试源码才发现 jquery.jqGrid.full.js的11025行有这么一句： rt = $(this).jqGrid("getRootNodes");我跟到这里发现获取的rt为空，然后继续跟getRootNodes方法，在10801行发现这
codeigniter集成jqgrid
weixin_33932129的博客
08-13 125
2019独角兽企业重金招聘Python工程师标准>>> ...
jqGrid 排序功能
热门推荐
@风的博客
10-18 4万+
主要添加 sortable：true，sortorder ："asc"   某些字段不要拍戏功能的话 只要在字段中加入 sortable：false； jqgrid排序的功能是：在点击每一列的列名时，会根据你所点击列名的name去排序，jqgrid会将此列的字段传到server中，在colModel中sortable: true是默认的,如果不写此字段默认是支持排序的，如果不想此字段进行排序则s
jqGrid排序的两种实现方式
qq_27009517的博客
12-23 2253
实现方案一客户端实现排序： jqGrid属性 loadonce:true时，所有数据加载在客户端，点击列标题由jqGrid在客户端自动排序，不再从服务器取值。 参考文件：ccMxCxTjCc.js js设定： jqGrid的设定： colModel: [ { ..... name: ‘zykj‘, sortable: true, }, ...... }], ...... loadonce:true, //一次加载全部数据到客户端，由客户端进
jqGrid表头锁列及排序功能细节
01-17
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节
jqGrid 的使用笔记：1. 开始
04-18
jqGrid 提供了丰富的特性，包括数据分页、排序、过滤、编辑、导出等功能，使其成为 Web 应用程序中展示和操作大量数据的理想选择。 ### 1. 安装 jqGrid 首先，我们需要在项目中引入 jqGrid 的 CSS 和 JavaScript ...
jqGrid使用笔记.docx
04-14
在 jqGrid 中，我们可以使用一系列方法来实现对表格数据的编辑操作。以下是关于 jqGrid 行编辑方法的详细说明： 1. **editRow**: 此方法用于将指定行切换到编辑模式。调用格式为 `editRow(rowid, keys, oneditfunc,...
JqGrid基础教程：查询、修改与分组操作
"这篇学习笔记主要介绍了JqGrid的基本使用，包括其查询、修改、分组等功能，并提供了相关的文档和示例网站链接。文中提到了一个特定的逻辑思路，即初次加载数据后将JqGrid设为本地数据模式，以及对编辑功能的限制，...
jqGrid表格数据修改删除代码.zip
最新发布
11-02
7. **AJAX通信**：jqGrid默认使用AJAX进行异步数据交互。你需要配置`url`参数指定服务器端处理请求的URL，并可能需要定义`serializeGridData`函数来序列化发送到服务器的数据。 8. **CSS和jQuery特效**：由于标签中...
jqGrid4.5.2强大的多列排序终于有了
05-29
终于包含了多列排序功能,4.5以后才有此功能。赶紧升级吧。
jqGrid专题：方法文档
weixin_30553837的博客
04-15 101
jqGrid方法: 方法名 参数 返回值 说明 addJSONData data none 使用传来的data数据填充表格。使用方法： var mygrid = jQuery(”#”+grid_id)[0]; var myjsongrid = eval(”(”+jsonresponse.r...
jqgrid local 加载数据按照某个字段进行升序和降序排序
bossxu_的博客
06-06 5222
jqgrid datatype:’local’ 加载本地数据 按照指定的字段名进行排序,通过jqgrid内置的三个属性进行排序 sortname: ‘fca09’, //要排序的字段 //默认表格加载时根据fca09列排序 sortorder: ‘asc’, //默认的排序方式,跟数据库的asc,desc一样 asc 降序 desc 升序 sortable...
jqgrid 列表头 根据选中顺序排序和显示
qq_27009517的博客
01-28 1305
好久没看，再来看看，脑细胞死了不少，呃呃呃呃。。。。 jqgrid 本身的列的colNames就有hidden属性，此业务是在显示的列上，客户进行操作，显示和排序自己要的。 过滤设置hidden属性的。 getAllShowNames: function(){ var self = this; var temp = []; // var colModelIndexArr={}; for(var i = 0; i < s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值