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＆amp; xdata）。截至目前，我只在ResponseText＆amp;中传回一个字段。 ResponseXML（可变行数）。最终，它将是3-5个领域。

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

我以为你会使用datastr＆amp; datatype的{​​{1}}，但这并不像我想象的那样有效。部分jqGrid如下所示。这也包含在xmlstring中。

mycallback function

我对jQuery和amp;都很新。 jqGrid，并希望得到任何帮助或指导。

修改

下面是我正在使用的数据示例（Northwind数据库之外）。

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

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

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

最初，我一直在使用XMLHttpRequest运行查询＆amp;接收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以获取一些代码示例。