jqGrid XML数据源读取器选项配置

　　本章介绍jqGrid配置datatype为xml/xmlstring数据类型时，如何设置xml数据的读取器。

　　默认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" 
      } 
   },
//...
});

　　匹配的xml格式的数据如下

<rows>    
  <page>1</page>    
  <total>2</total>
  <userdata name="totalinvoice">240.00</userdata>  
  <userdata name="tax">40.00</userdata> 
  <row id='1'>    
    <cell>1_111</cell>    
    <cell>1_222</cell>    
    <cell>1_333</cell>    
    <cell>1_444</cell>    
    <cell>1_555</cell>    
    <cell>1_666</cell>  
    <cell>1_777</cell>     
  </row>
  <row id='2'>
    <cell>2_111</cell>
    <cell>2_222</cell>
    <cell>2_333</cell>
    <cell>2_444</cell>
    <cell>2_555</cell>
    <cell>2_666</cell>
    <cell>2_777</cell>
  </row>
</rows>

　　如果服务器返回的xml结构如上面读取器配置的一样，你就不需要配置xmlReader了。如果不是返回的xml数据格式不是这样，可以使用很多办法取出数据，查看下面的xml数据

　　在colModel配置中，和xml数据相关的配置为xmlmap，描述xml的字段，例如

jQuery("#gridid").jqGrid({
//...
   colModel : [ {name:'amount',..., xmlmap:'amt'...}...],
//...
});

　　这样配置jqGrid会在xml数据中找到amt节点（repeatitems配置为false，后面再介绍repeatitems）

XML数据

　　如上面提到的，如果jqGrid中没有配置datatype和xmlReader ，jqGrid默认数据源为xml格式的，返回的xml结构如上面示例中描述的。我们是否有机会处理服务器响应的其他xml格式？解决办法就是配置xmlReader和colModel中增加一些额外配置。下面为xmlReader如何配置。

重要提示：访问xml元素规则和jQuery类库中一样，例如css模式，查看更多信息请参阅：http://www.w3.org/TR/REC-CSS2/selector.html

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" 
      } 
   },
//...
});

4.3版本的jqGrid可以读取xml响应中的任何属性。并且标记可以设置为函数

　　下面使用示例来阐述xmlReader配置中的所有配置项。

root

　　root配置定义xml数据源中的根元素，描述数据的开始节点，所有循环匹配的子元素都从这个根元素开始。

... 
<invoices> 
   <request>true</request> 
   ... 
   <result> 
      <row> 
         <cell>data1</cell> 
         <cell>data2</cell> 
         <cell>data3</cell> 
         <cell>data4</cell> 
         <cell>data5</cell> 
         <cell>data6</cell> 
      </row> 
      ... 
   </result> 
</invoices>

　　root配置为"result"，所有的数据将会从这个节点开始处理。因为数据行标签为<row>，单元格为<cell>，所以配置如下

jQuery("#gridid").jqGrid({
//...
   xmlReader: { root:"result" },
//...
});

row

　　描述实际的行标签节点。注意row配置节点名称需要为root节点下的子节点。如果xml结构如下

... 
<invoices> 
   <request>true</request> 
   ... 
   <result> 
      <invoice> 
         <cell>data1</cell> 
         <cell>data2</cell> 
         <cell>data3</cell> 
         <cell>data4</cell> 
         <cell>data5</cell> 
         <cell>data6</cell> 
      </invoice> 
      ... 
   </result> 
</invoices>

那么jqGrid配置如下

jQuery("#gridid").jqGrid({
//...
   xmlReader: { root:"result", row:"invoice"  },
//...
});

page
total
records

　　这个３个配置描述分页信息。配置的元素节点可以为根元素的子节点，也可以不是。xml示例数据如下

... 
<invoices> 
   <request>true</request> 
   ... 
   <currentpage>1</currentpage>
   <totalpages>10</totalpages>
   <totalrecords>20</totalrecords>
   <result> 
      <invoice> 
         <cell>data1</cell> 
         <cell>data2</cell> 
         <cell>data3</cell> 
         <cell>data4</cell> 
         <cell>data5</cell> 
         <cell>data6</cell> 
      </invoice> 
      ... 
   </result> 
</invoices>

对应的xmlReader配置如下

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

repeatitems
cell

　　这2个配置告诉jqGrid数据行中列数据是重复的。例如，xml数据源，表示行中的单元节点标签是一样的，xml示例代码如下

... 
<invoices> 
   <request>true</request> 
   ... 
   <currentpage>1</currentpage>
   <totalpages>10</totalpages>
   <totalrecords>20</totalrecords>
   <result> 
      <invoice> 
         <invcell>data1</invcell> 
         <invcell>data2</invcell> 
         <invcell>data3</invcell> 
         <invcell>data4</invcell> 
         <invcell>data5</invcell> 
         <invcell>data6</invcell> 
      </invoice> 
      ... 
   </result> 
</invoices>

xmlReader配置如下

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

　　repeatitems设置为true， colModel配置所有列没有key配置，为false没有指定id列，那么，id配置需要为xml数据源行节点中的一个属性。我们看看如下的xml结构

... 
<invoices> 
   <request>true</request> 
   ... 
   <currentpage>1</currentpage>
   <totalpages>10</totalpages>
   <totalrecords>20</totalrecords>
   <result> 
      <invoice asin='12345'> 
         <invcell>data1</invcell> 
         <invcell>data2</invcell> 
         <invcell>data3</invcell> 
         <invcell>data4</invcell> 
         <invcell>data5</invcell> 
         <invcell>data6</invcell> 
      </invoice> 
      ... 
   </result> 
</invoices>

xmlReader配置如下

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> 
         <asin>12345</asin>
         <invoiceno>data1</invoiceno>
         <invoicedate>data2</invoicedate> 
         <invoiceamount>data3</invoiceamount> 
         <invoicetax>data4</invoicetax> 
         <invoicetotal>data5</invoicetotal> 
         <notes>data6</notes> 
      </invoice> 
      ... 
   </result> 
</invoices>

　　<asin> 标记为唯一id，那么行id配置需要设置为asin标记。上面的xml数据格式可以配置xmlReade和colModelr如下

jQuery("#gridid").jqGrid({
//...
   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"
  },
//...
});

　　也可以使用其他方法。如果colModel的name对你很重要，可以配置jqGrid如下

jQuery("#gridid").jqGrid({
//...
   colModel :[ 
      {name:'invoiceno', index:'invid', width:55}, 
      {name:'invoicedate', index:'invdate', width:90}, 
      {name:'invoiceamount', index:'amount', width:80, align:'right'}, 
      {name:'invoicetax', index:'tax', width:80, align:'right'}, 
      {name:'invoicetotal', index:'total', width:80, align:'right'}, 
      {name:'notes', index:'note', width:150, sortable:false} 
   ],
   xmlReader: { 
      root:"result", 
      row:"invoice",
      page:"invoices>currentpage", 
      total:"invoices>totalpages", 
      records:"invoices>totalrecords",
      repeatitems:false,
      id : "asin"
  },
//...
});

　　就是说，jqGrid会检查colModel是否存在xmlmap映射配置，如果不存在那么name值将作为xmlmap映射。要使用xmlmap映射， xmlReader 配置中repeatitems 需要设置为false。

　　subgrid配置在上面示例的xmlReader配置中提到了几次。subgrid的配置项和上面列出的所有配置项一样。更多subGrid配置细节参考： Subgrids.

XML字符串数据

　　datatype设置xmlstring和设置为xml时拥有类似的配置。唯一不同就是数据为有效的xml格式的字符串，配置datastr属性，来看个示例。

　　如果你使用xmlstring作为datatype配置，那么当数据被处理完毕后datatype将自动设置为local，分页将不会起效果。

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'
  }); 
});

　　此示例中使用了colModel配置中的sorttype。sorttype配置描述列按照哪种数据格式排序，因为使用xmlstring作为数据源，jqGrid使用客户端排序。

xml注意事项和限制

~~~~Attributes in any XML tag can not be used to obtain the data. The only exception is the id~~（在xml标签中的任何属性不能作为数据，除了id数据）~~
当xmlReader中的repeatitems设置为true，colModel中配置的列数要和数据源中行元素中的单元数一样
当xmlReader中的repeatitems设置为true，行的唯一id可配置colModel中的key选项
当xmlReader中的repeatitems设置为false，colModel中配置的列数不一定需要和数据源中行元素中的单元数一样
When the option repeatitems in xmlReader is set to false the row tag can not contain any child elements。这句有点搞不明白，repeatitems设置为false，row标签不能包含任何其他子元素？那行的数据从何而来。。。

来源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

加支付宝好友偷能量挖...

原创文章，转载请注明出处：jqGrid XML数据源读取器选项配置

2013-6-28评论(0)Web开发网

阅读(555)喜欢(0)分类：jqGrid中文API