jQuery-jqGrid - 使用responseXML 和/或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;

由于数据集非常小，我们选择简单地重新创建/替换页面上的网格。我知道数据正在传递回上面的两个变量(data 和 xdata)。截至目前，我仅在 ResponseText 和 ResponseXML 中传回一个字段(行数可变)。最终，它将是 3-5 个字段。

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

我以为您会使用 xmlstring 的 datastr 和 datatype，但这并不像我想象的那样工作。部分jqGrid如下所示。这也包含在 mycallback 函数中。

$("#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>

自从我最初的帖子以来，我已经将数据显示在网格上，现在正在尝试对其进行格式化。

最终，我想在网格的每一行中添加一个提交按钮，该按钮允许用户选择一行，然后单击提交按钮将该行重新添加到表中(完成后，我' d 使用日期时间戳作为其中一列)。

最初，我一直使用 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一些代码示例。