jQuery-jqGrid - 使用 responseXML 或 responseText答案

【问题标题】：jQuery-jqGrid - using responseXML and or responseTextjQuery-jqGrid - 使用 responseXML 或 responseText
【发布时间】：2013-05-01 19:54:04
【问题描述】：

我正在开发一个使用 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 变量/对象中已有的内容？

我以为您会使用 xmlstring 的 datastr 和 datatype 但这并不像我想的那样工作。部分 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>

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

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

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

【问题讨论】：

对服务器的separate Ajax 请求的使用和带有datatype: "xmlstring" 的jqGrid 的使用是不好的方式。最好使用datatype: "xml" 并允许 jqGrid 进行调用。您可以使用xmlReader 通知 jqGrid 如何它可以从服务器返回的 xml 响应中读取所需的信息。如果您要包含返回服务器的 XML 数据，我可以为您提供xmlReader 的帮助。我不明白你问题的第一部分（关于和responseText 和responseXML）。 “创建” jqGrid 的代码是错误的，因为您在 xmlReader 选项中插入了所有选项
responseText 和 responseXML 部分想要使用其中之一，因为我已经有了带有数据的文本和 XML 响应。我想使用 jqGrid 来简单地从它们构造数据网格。我已经弄清楚了一些“创建”问题 - 我正在查看一个除了 xmlReader 之外省略了所有内容的示例。
您必须包含返回服务器的XML 数据示例。只有在那之后才能说应该使用哪个xmlReader。关于responseXML 的用法我只能重复一遍，我认为不需要单独使用XMLHttpRequest 的代码。在示例中，来自myURL 的完整响应包含 jqGrid 的数据。您可以只使用url: myURL, datatype: "xml", loadonce: true 而不是代码。 jqGrid 的其他选项（尤其是xmlReader）取决于从服务器返回的 XML 响应的结构。 您能否将问题附加到 XML 数据中？
XML 数据已发布及其他信息。请参阅上文进行修改。

标签： jquery xml jqgrid xmlhttprequest

【解决方案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 获取一些代码示例。

【讨论】：