如何将下面的示例xml数据绑定到jqgrid

时间:2016-01-19 13:09:59

标签: jquery asp.net xml asp.net-mvc jqgrid

我的XML数据下面有 name 作为xml标记元素,它实际上是列名,并且重复次数与需要在行中填充的单元格值重复。 标记元素实际上是该列的行的值。

我需要做的是使用下面的xml我需要获取所有名称元素并将其作为列。请注意,如果属性标记包含除name和value标记之外的url标记,那么我们应该将该列设置为超链接列。

INPUT

通过这个例子,我们应该获得一个标题行和3个数据行。

<entry>
  <properties xmlns="http://example.com" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
    <property>
      <name>Accessed</name>
      <value>14.01.2016 12:20:08</value>
    </property>
    <property>
      <name>Case no.</name>
      <url>http://localhost/locator.aspx?ID=200017</url>
      <value>16/00017</value>
    </property>
    <property>
      <name>Title</name>
      <url>http://localhost/locator.aspx?ID=200017</url>
      <value>San Case 16</value>
    </property>
    <property>
      <name>Type</name>
      <value>Case</value>
    </property>
    <property>
      <name>Responsible person</name>
      <value>Administrator</value>
    </property>
    <property>
      <name>Responsible unit</name>
      <value>Products</value>
    </property>
    <property>
      <name>Status</name>
      <value>In progress</value>
    </property>
  </properties>
  <properties xmlns="http://example.com" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
    <property>
      <name>Accessed</name>
      <value>14.01.2016 12:20:08</value>
    </property>
    <property>
      <name>Case no.</name>
      <url>http://localhost/locator.aspx?ID=200017</url>
      <value>16/00017</value>
    </property>
    <property>
      <name>Title</name>
      <url>http://localhost/locator.aspx?ID=200017</url>
      <value>San Case 16</value>
    </property>
    <property>
      <name>Type</name>
      <value>Case</value>
    </property>
    <property>
      <name>Responsible person</name>
      <value>Administrator</value>
    </property>
    <property>
      <name>Responsible unit</name>
      <value>Products</value>
    </property>
    <property>
      <name>Status</name>
      <value>In progress</value>
    </property>
  </properties>
  <properties xmlns="http://example.com" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
    <property>
      <name>Accessed</name>
      <value>14.01.2016 12:20:08</value>
    </property>
    <property>
      <name>Case no.</name>
      <url>http://localhost/locator.aspx?ID=200017</url>
      <value>16/00017</value>
    </property>
    <property>
      <name>Title</name>
      <url>http://localhost/locator.aspx?ID=200017</url>
      <value>San Case 16</value>
    </property>
    <property>
      <name>Type</name>
      <value>Case</value>
    </property>
    <property>
      <name>Responsible person</name>
      <value>Administrator</value>
    </property>
    <property>
      <name>Responsible unit</name>
      <value>Products</value>
    </property>
    <property>
      <name>Status</name>
      <value>In progress</value>
    </property>
  </properties>
</entry>

1 个答案:

答案 0 :(得分:0)

经过一些调查后,我发现这可以通过改变返回的数据并通过循环来构造包含列数据,列模型和列名的Json对象来处理。我通过创建一个Json对象然后将其绑定到网格来完成此操作。

function xml2JsonInGridFormat(xml, visibleColoumns) {
                if (xml.length > 0) {
                    var xmlDoc = $.parseXML(xml)
                    var result = {};
                    var colData = new Array();
                    var colNames = new Array();
                    var colModels = new Array();
                    //Build column Name         
                    var NameProperties = xml[0].getElementsByTagName("name");
                    for (var j = 0; j < NameProperties.length; j++) {
                        var colName = NameProperties[j].childNodes[0].nodeValue;
                        colNames.push(colName);
                    }
                    //Build column Model
                    var Modelproperties = xml[0].getElementsByTagName("property");
                    for (var i = 0; i < Modelproperties.length; i++) {
                        var colModel = null;                     
                        colModel = {
                            'name': Modelproperties[i].getElementsByTagName("name")[0].childNodes[0].nodeValue,                            
                            sortable: true,
                            unformat: !!Modelproperties[i].getElementsByTagName("url").length,
                            shrinkToFit: false,
                            hidden: HideColumn(Modelproperties[i].getElementsByTagName("name")[0].childNodes[0].nodeValue, visibleColoumns),
                            width: "120px"                          
                        }                        
                        colModels.push(colModel);                        
                    }
                    //Build Row Data                    
                    for (var i = 0; i < xml.length; i++) {
                        var rows = xml[i].getElementsByTagName("property");
                        var row = {};
                        for (var j = 0; j < rows.length; j++) {
                            var cellKey = "", cellValue = "";
                            if (rows[j].getElementsByTagName("name")[0].childNodes[0] != undefined)
                                cellKey = rows[j].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                            if (rows[j].getElementsByTagName("value")[0].childNodes[0] != undefined) {
                                if (rows[j].getElementsByTagName("url").length > 0)
                                    cellValue = buildURL($(rows[j].getElementsByTagName("url")).text(), HtmlEncode($(rows[j].getElementsByTagName("value")).text()));
                                else
                                    cellValue = HtmlEncode(rows[j].getElementsByTagName("value")[0].childNodes[0].nodeValue); //rows[j].getElementsByTagName("value")[0].childNodes[0].nodeValue;
                            }
                            row[cellKey] = cellValue;
                        }
                        colData.push(row);
                    }
                    result["ColNames"] = colNames;
                    result["ColModel"] = colModels;
                    result["ColData"] = colData;
                    return result;
                }