2

我正在开发一个使用 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& datatypeofxmlstring但这并不像我想的那样工作。部分 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 启动一个回调函数，该函数将加载和显示网格。

4

1 回答 1

4

如果您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
});

相应的演示具有带有一些按钮的寻呼机，可以使用它进行寻呼：

在此处输入图像描述

可以向网格中添加非常简单的本地过滤和搜索功能，就像在演示中一样。

您对每行中某些按钮的最后要求看起来非常接近格式化程序：“actions”。您可以查看一些代码示例的答案。

于 2013-05-02T19:02:28.530 回答