jQuery-jqGrid - 使用responseXML和or responseText

Question

我正在使用jQuery的页面上工作，并且计划将jqGrid并入到页面中。该页面将有一个提交按钮，将一行写入表中，并且当发生onReadyStateChange时，它将启动一个回调函数。在该函数中，jqGrid将被重新加载/替换。当前的代码如下：

var myReq = new XMLHttpRequest(); 
var myURL = myServer + myOtherInfo; 

..... (other parameters are added to the myURL variable) 

myReq.open("GET",myURL, true); // true=asynchronous, false=synchronous 
myReq.onreadystatechange = mycallback; 
myReq.send(null); 


function mycallback() { 
var data = myReq.responseText; 
var xdata = myReq.responseXML; 

由于数据集将是非常小的，我们已选择简单地重新创建/替换页面上的网格。我知道数据传回到上面的两个变量（数据& xdata）。截至目前，我只在ResponseText & ResponseXML（可变数量的行）中传回一个字段。最终，这将是3-5场。

如何让jqGrid使用data/myReq.responseText或xdata/myReq.responseXML变量/对象中已有的内容？

我以为你会使用datastr & datatypexmlstring但这不像我想象的那样工作。部分jqGrid如下所示。这也包含在mycallback function中。

$("#myGrid").jqGrid({ 
xmlReader: { 
datastr: xdata, 
datatype: "xmlstring", 
root: "Row", 
row: "ContactName", 
colNames: ["Contact Name"], 
colModel: [{name:"ContactName",index:"ContactName",width:200,align:"right"}], 
viewrecords: true, 
caption: "My Grid" 
} 
}); 

我很新的这两个jQuery的& jqGrid的，并希望任何帮助或方向。

编辑

下面是我目前使用（从Northwind数据库）中的数据的样本。

<?xml version="1.0" encoding="UTF-8" ?> 
<Rowsets DateCreated="2013-05-02T09:18:07" EndDate="2013-05-02T09:18:07" StartDate="2013-05-02T08:18:07" Version="12.0.6 Build(13)"> 
<Rowset> 
<Columns> 
<Column Description="ContactName" MaxRange="1" MinRange="0" Name="ContactName" SQLDataType="12" SourceColumn="ContactName" /> 
<Column Description="City" MaxRange="1" MinRange="0" Name="City" SQLDataType="12" SourceColumn="City" /> 
<Column Description="Country" MaxRange="1" MinRange="0" Name="Country" SQLDataType="12" SourceColumn="Country" /> 
</Columns> 
<Row> 
<ContactName>Maria Anders</ContactName> 
<City>Berlin</City> 
<Country>Germany</Country> 
</Row> 
<Row> 
<ContactName>Ana Trujillo</ContactName> 
<City>México D.F.</City> 
<Country>Mexico</Country> 
</Row> 
<Row> 
<ContactName>Antonio Moreno</ContactName> 
<City>México D.F.</City> 
<Country>Mexico</Country> 
</Row> 
<Row> 
<ContactName>Thomas Hardy</ContactName> 
<City>London</City> 
<Country>UK</Country> 
</Row> 
<Row> 
<ContactName>Christina Berglund</ContactName> 
<City>Luleå</City> 
<Country>Sweden</Country> 
</Row> 
<Row> 
<ContactName>Hanna Moos</ContactName> 
<City>Mannheim</City> 
<Country>Germany</Country> 
</Row> 
</Rowset> 
</Rowsets> 

由于我原来的文章，我已经得到的数据出现在网格上，现在正在尝试格式化它。

最终，我想在网格的每一行添加一个提交按钮，这将允许用户选择一行，然后单击提交按钮重新添加该行到表（当完成后，我将日期时间戳用作列之一）。

最初，我一直在使用XMLHttpRequest来运行查询&接收XML回来，并使用onreadystatechange来启动一个回调函数来加载和显示网格。

Answer 1

如果你有myURL这在你在你的问题包括，那么你可以使用下面的代码的形式，每Ajax的XML数据提供：

$("#myGrid").jqGrid({ 
    url: "steve_o.xml", 
    xmlReader: { 
     repeatitems: false, 
     root: "Rowsets>Rowset", 
     row: "Row" 
    }, 
    colNames: ["Contact Name", "City", "Country"], 
    colModel: [ 
     { name: "ContactName" }, 
     { name: "City" }, 
     { name: "Country" } 
    ], 
    rowNum: 10000, // no local paring of data 
    gridview: true, 
    viewrecords: true, 
    height: "auto", 
    loadonce: true 
}); 

相应demo显示

您可以非常方便地使用本地分页的数据，只需修改代码即可

$("#myGrid").jqGrid({ 
    url: "steve_o.xml", 
    xmlReader: { 
     repeatitems: false, 
     root: "Rowsets>Rowset", 
     row: "Row" 
    }, 
    colNames: ["Contact Name", "City", "Country"], 
    colModel: [ 
     { name: "ContactName" }, 
     { name: "City" }, 
     { name: "Country" } 
    ], 
    rowNum: 5, 
    rowList: [5, 10, 20, 100, 10000], 
    pager: "#pager", 
    gridview: true, 
    rownumbers: true, 
    viewrecords: true, 
    height: "auto", 
    loadonce: true 
}); 

The corresponding demo有与一些按钮寻呼机和一个可以使用它的分页：

人们可以在the demo很容易本地过滤和搜索功能添加到网格等。

你最后的要求是关于每行中的一些按钮看起来非常接近formatter: "actions"。对于一些代码示例，您可以看看the answer。