`
jean7155
  • 浏览: 63096 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

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

JavaScript 
阅读更多
数据类型
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" 
      } 
   },
...
});


XML数据
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"
  },
...
});


xml string 
<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>


数据类型：json, jsonp, (jsonstring)
主要数据元素：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"},
      ...
  ]
}


json string
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"} 
    ] 
}


jsonReader as function 
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。

Array Data
相关的配置：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" });


Function 
<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>


User Data 
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')
分享到：
| procedure中对其他用户的表的操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jqGrid 的使用笔记：1. 开始

    jqGrid 提供了丰富的特性，包括数据分页、排序、过滤、编辑、导出等功能，使其成为 Web 应用程序中展示和操作大量数据的理想选择。 ### 1. 安装 jqGrid 首先，我们需要在项目中引入 jqGrid 的 CSS 和 JavaScript ...

    jqGrid使用笔记.docx

    在 jqGrid 中，我们可以使用一系列方法来实现对表格数据的编辑操作。以下是关于 jqGrid 行编辑方法的详细说明： 1. **editRow**: 此方法用于将指定行切换到编辑模式。调用格式为 `editRow(rowid, keys, oneditfunc,...

    jqGrid表格内容查询读取代码.zip

    2. 数据操作：提供排序、筛选、分页、编辑、新增和删除数据的功能。用户可以通过点击表头进行排序，使用内置的搜索工具进行复杂查询，或者通过操作按钮执行编辑和删除操作。 3. 自定义功能：jqGrid允许开发者自定义...

    jqgrid学习笔记

    jqGrid 是一个强大的 jQuery 插件，用于创建交互式的表格，它允许用户在网页上轻松地展示、操作和检索数据。以下是对 jqGrid 的详细解释： 1. **安装jqGrid**： 安装 jqGrid 非常简单，只需要将相关的 CSS 和 ...

    jqGrid表格数据修改删除代码.zip

    7. **AJAX通信**：jqGrid默认使用AJAX进行异步数据交互。你需要配置`url`参数指定服务器端处理请求的URL，并可能需要定义`serializeGridData`函数来序列化发送到服务器的数据。 8. **CSS和jQuery特效**：由于标签中...

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    jqGrid还支持行选中、多选以及行内编辑模式，这对于数据操作特别有用。在行内编辑模式下，用户可以直接在表格中修改数据，点击保存后，这些更改会被自动发送到服务器进行处理。 在外观定制方面，jqGrid允许通过CSS...

    jqgrid4.6.zip

    jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作...通过研究这些资源，开发者可以更好地理解jqGrid的事件处理、自定义行为、样式调整以及数据操作等核心概念，提升在Web开发中的表格管理能力。

    jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）

    jQuery的jqGrid是一个强大的数据网格插件，用于展示和操作大量结构化数据。本篇学习笔记将详细介绍如何使用jqGrid实现分页和搜索功能。 首先，要使用jqGrid，你需要在HTML页面中引入必要的CSS和JavaScript文件。...

    jqgrid 简单学习笔记

    4. **交互性**：JqGrid支持查询、修改、分组等操作。在本示例中，它还实现了查询、分组和一些基础的编辑功能。 此外，JqGrid还提供了丰富的搜索和过滤选项，通过`searchoptions`和`search`属性可以定义列的搜索行为...

    jqGrid 学习笔记整理——进阶篇(一 )

    jqGrid 是一个强大的 jQuery 插件，用于创建交互式的表格，具有数据检索、排序、过滤、编辑等多种功能。本篇文章将深入探讨 jqGrid 的进阶使用，特别关注如何在浏览导航栏添加自定义按钮。 首先，jqGrid 的基本结构...

    jggrid资料

    3. **jqgrid学习笔记网搜和个人经验1.pdf**：作者通过网络搜集和自己的实践，整理出的学习笔记，包含了常见问题解决方案和实践经验分享，对于初学者极具参考价值。 **总结** jgGrid作为一个强大的JavaScript表格...

    Java中jqGrid 学习笔记整理——进阶篇(二)

    在本篇Java中jqGrid的学习笔记整理中，我们将聚焦于jqGrid与后台Java服务的数据交互。jqGrid是一款强大的JavaScript库，用于创建动态、交互式的表格，而这里的进阶篇(二)将涉及到如何通过Java后端来提供数据支持。 ...

    jQuery动态创建表格生成器代码.zip

    4. **数据绑定**：动态表格通常与后端数据源结合，可以使用Ajax请求获取数据，然后将数据填充到表格中。`$.ajax()`或`$.getJSON()`是常用的异步请求函数。 5. **事件监听**：jQuery的`.on()`方法允许我们为元素绑定...

    MongoDB入门教程

    MongoDB学习笔记(二)深入讲解了如何通过Samus驱动进行基本数据操作。Samus驱动是MongoDB的Java驱动程序，它提供了与MongoDB交互的API。读者将学习如何创建连接、执行查询、插入、更新和删除数据，以及如何处理集合和...

    inspinia_admin-v2.0

    模板集成了许多第三方插件，如jqGrid用于数据表的分页和排序，Chart.js用于图表展示，iCheck用于复选框和单选按钮的美化等。这些插件的整合增强了系统的功能性和实用性。 7. **代码结构与可维护性**： V2.0版本...

Magicbox
Global site tag (gtag.js) - Google Analytics