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。