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

  这个3个配置描述分页信息。配置的元素节点可以为根元素的子节点,也可以不是。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"
  },
//...
});

 

  • id

  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数据源读取器选项配置

评论(0)Web开发网
阅读(718)喜欢(0)jqGrid中文API