如何在 jqgrid/Jtable 中使用 xml 动态绑定列标题和行答案

【问题标题】：How to bind column headers and rows dynamically using xml in jqgrid/Jtable如何在 jqgrid/Jtable 中使用 xml 动态绑定列标题和行
【发布时间】：2015-09-30 12:34:08
【问题描述】：

嗨，有一个我需要在 Jqgrid 中显示的 xml。任何人都可以帮助完成这项工作。如果我在代码中遗漏了任何其他设置，请告诉我

我的xml数据：

<entry>
<properties xmlns="http://example.com" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <property>
    <name>header1</name>
    <value>value 1.1</value>
  </property>
  <property>
    <name>Header2</name>
    <url>http://localhost/locator.aspx</url>
    <value>value 1.2 </value>
  </property>
  <property>
    <name>header 3</name>
    <value>value 1.3 </value>
  </property>
</properties>
</entry>
<entry>
  <properties xmlns="http://example.com" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
    <property>
      <name>header1</name>
      <value>value 2.1</value>
    </property>
    <property>
      <name>Header2</name>
      <url>http://localhost/locator.aspx</url>
      <value>value 2.2 </value>
    </property>
    <property>
      <name>header 3</name>
      <value>value 2.3</value>
    </property>
  </properties>
</entry>

像下面这样绑定 JqGrid 但不起作用

function loadXMLDoc(data)
{
    $("#loadXMLData").jqGrid({
    url: 'local',
    datatype: "xml",
    height: 'auto',
    colModel: [
        { name:xmlmap: function (obj) {
                return $(obj).attr('name');
            }}
            , width: 80, sorttype: 'int',
            xmlmap: function (obj) {
                return $(obj).attr('value');
            }           
    ],
    xmlReader: {
        root: "properties",
        row: "property",
        repeatitems: false
    },
    loadonce: true,
    rowNum: 1000
});

我需要以下格式的输出

<table border=1>
  <tr>
    <th>
      header 1
      </th>
    <th>
      header 2
      </th>
    <th>
      header 3
      </th>
    </tr>
  <tr>
    <td>value 1.1</td>
    <td>value 1.2</td>
    <td>value 1.3</td>
    </tr>
  <tr>
    <td>value 2.1</td>
    <td>value 2.2</td>
    <td>value 2.3</td>
    </tr>
  <tr>
    <td>value 3.1</td>
    <td>value 3.2</td>
    <td>value 3.3</td>
    </tr>
  </table>

【问题讨论】：

标签： jquery xml jqgrid jqgrid-asp.net

【解决方案1】：

你可以试试下面例子中提到的xmlstring数据类型

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

Reference

【讨论】：

如果你看过我的 xml。它说我的列和行是动态的。我需要根据 xml 中给出的值来决定。像标题 1、herader 2 等。所有这些我都需要从 xml 本身中获取
不管是不是动态的，你可以把它放在本地的var我的例子中，然后继续前进。
任何提示将 xml 转换为 json？

【解决方案2】：

您可以参考此 SO 帖子 Convert XML to JSON (and back) using Javascript 或点击此链接至 Convert XML to JSON

如果您有生成源 XML 文件的规定，那么与其稍后将其转换为 JSON，不如直接生成 JSON 格式的 colModel 和数据。

【讨论】：