ASP.NetおよびJSONフォーマットでjQueryのjgGridを実装する
https://stackoverflow.com/questions/181029
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
誰もがjQueryグリッドプラグインjqGridを実装できましたか？私はJSONページングを実装しようとしていますが、私は近づいているように感じていますが、重要でない詳細に圧倒されています。誰かがサンプルコードを投稿できたら、とても感謝しています。
解決
私のプロジェクトでこれをやろうとしているときにあなたの投稿を見つけました。うまくいきました。将来それを必要とする人にとって、jqGridはJSONとASP.NETですぐに動作しません。 grid.base.jsにいくつかの小さな変更を加える必要があります。 829行目付近で、jsonのケースセクションを次のものに置き換えます。
case "json":
gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string
$.ajax({ url: ts.p.url,
type: ts.p.mtype,
dataType: "json",
contentType: "application/json; charset=utf-8", //required by ASP.NET
data: gdata,
complete: function(JSON, st) { if (st == "success") { addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) { loadComplete(); } } },
error: function(xhr, st, err) { if (loadError) { loadError(xhr, st, err); } endReq(); },
beforeSend: function(xhr) { if (loadBeforeSend) { loadBeforeSend(xhr); } } });
if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }
break;
次に、次の関数を追加します。
function cleanUp(responseText) {
var myObject = JSON.parse(responseText); //more secure than eval
return myObject.d; //ASP.NET special
}
JSONパーサーおよび文字列。 ASP.NETでの作業に加えて、この改訂されたコードは、より安全ですなくなった。
編集：また、grid.celledit.js、grid.formedit.js、grid.inlinedit.js、grid.subgrid.jsに対して同様の編集を行う必要がある場合があることに注意してください。 。
他のヒント
jQueryとASP.NETを使用してクライアント側のページングを行うためのjTemplatesを作成しました。ここで見つけることができるブログ投稿をしました： http：// www .aaron-powell.com / blog.aspx？id = 1209
テンプレートデータの場所を作成し、ASP.NETからデータを返し、ページングソリューションを実装する方法について説明します。
ASP.Net MVC JsonResultを使用してグリッドにデータを入力できます。
個人クラス
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime Birthday { get; set; }
public static IEnumerable<Person> GetABunchOfPeople()
{
// Get a bunch of People.
}
}
コントローラーには次のものがあります：
public JsonResult GetABunchOfPeopleAsJson()
{
var rows = (Person.GetABunchOfPeople()
.Select(c => new
{
id = c.ID,
cell = new[]
{
c.ID.ToString(),
c.Name,
c.Birthday.ToShortDateString()
}
})).ToArray();
return new JsonResult
{
Data = new
{
page = 1,
records = rows.Length,
rows,
total = 1
}
};
}
およびURLのjqGrid構成は次のようになります。
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
私はすべてをまとめようとしているだけです。私の最初の懸念は、単純に正しいJSON応答を生成することです。返されたクラスは 'd'という名前のプロパティとしてシリアル化されているように見えます-これはJQueryのことですか、それともASP.Net Webメソッドの規則ですか？ jqGridはトップレベルのデータを探しているのではないかと思いますが、asp.netはそれを 'd'というプロパティに入れます：
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object GetData() {
TestClass tc = new TestClass() { One = "Hello", Two = "World" };
return tc;
}
$("#divResults").click(function() {
$.ajax({
type: "POST",
url: "GridData_bak.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(test) {
// Replace the div's content with the page method's return.
$("#divResults").text(test.d.One);
},
error: function(msg) {
$("#divResults").text(msg);
}
});
});
flexgridプラグインは拡張時に非常にまばらですが、デモページの小さなセクションにjsonシリアル化オブジェクトの作成に関する注意があります。モンキーグリスが少し付いたxmlオプションの場合、jsonの書式設定でも同じことができます
ここに私のxmlポートがあります
the setup for the grid
$("#tableToFlex").flexigrid({
url: 'WebService.asmx/getData'}
... *other configs* ...);
webservice.asmxクラスの次のコードを検討してください
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function getData(ByVal page As Integer, _
ByVal qtype As String, _
ByVal Query As String, _
ByVal rp As Integer, _
ByVal sortname As String, _
ByVal sortorder As String) As System.Xml.XmlDocument
'note these parameters are inputted to determine paging and constrains for the resultant rows
'Sample list to send to the grid
Dim list = New List(Of ApplicationStateInformation)
'Sample row object that holds name , surname , address, idnumber ...
list.Add(New RowObjects( "test1", "test1", "test1", "12345"))
list.Add(New RowObjects( "test2", "test2", "test2", "12345"))
list.Add(New RowObjects( "test3", "test3", "test3", "12345"))
list.Add(New RowObjects( "test4", "test4", "test4", "12345"))
'retun a xml doc, as we are using the xml format on the flexgrid
Dim returnDoc = New System.Xml.XmlDocument()
returnDoc.Load(New IO.StringReader(ToXmlResult(list)))
Return returnDoc
End Function
Private Function ToXmlResult(ByVal list As List(Of RowObjects)) As String
'this is the xml document format the grid understands
Dim result As String = "<?xml version=""1.0"" encoding=""utf-8""?>" & vbCrLf
result += "<rows>" & vbCrLf
result += String.Format("<page>{0}</page>" & vbCrLf, "1")
result += String.Format("<total>{0}</total>" & vbCrLf, "10")
For Each item In list
result += ConvertRowData(item)
Next
result += "</rows>" & vbCrLf
Return result
End Function
Private Function ConvertRowData(ByVal row As RowObjects) As String
Dim result As String = String.Format("<row id='{0}'>" & vbCrLf, row.IdNumber.ToString)
'THESE SHOULD BE HTML ENCODED (the format arg) but I left it out
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Name)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Surname)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.IdNumber)
result += "</row>" & vbCrLf
Return result
End Function
jqgridをjson＆amp;で動作させることができると思います。 grid.base.jsやその他のjqgridファイルを変更せずにasp.netを使用する場合は、datatypeプロパティを使用して独自のカスタムajax呼び出しを定義し、jsonリーダーを定義する必要があります。jqgridは、グリッドがリロードするたびにカスタムajax呼び出しとリーダーを使用します。
プロセスは、jsonreaderではなくxmlreaderを定義するxmlでも同様です。
jsonreaderのすべてのプロパティは、オンラインドキュメント
で定義されています>カスタムデータ型の例については、「データ型としての関数」を参照してください。 ライブデモページの＆quot; New in 3.3＆quot;
私の実装：
data：＆quot; {'page'： '＆quot; + gdata.page +＆quot; '、' rows '：'＆quot; + gdata.rows +＆quot; '、' sidx '：'＆quot; + gdata.sidx +＆quot; '、' sord '：'＆quot; + gdata.sord +＆quot; '、' nd '：'＆quot; + gdata.nd +＆quot; '、' _ search '：'＆quot; + gdata._search +＆quot; '、' searchField '：'＆quot; + ts.p.searchdata.searchField +＆quot; '、' searchString '：'＆quot; + ts.p.searchdata.searchString +＆quot; '、' searchOper '：'＆quot; + ts.p.searchdata.searchOper +＆quot; '}＆quot;、
success：function（JSON、st）{ if（st ==＆quot; success＆quot;）{addJSONData（JSON.d、ts.grid.bDiv）; if（loadComplete）{loadComplete（）; }}
完全なajaxイベントを使用してInstedは成功イベントを使用します。これにより、ダブルjsonがシリアライズされなくなります。
セル編集では気づかなかったことが1つあります。 同じデータ型（int）の複数のセルを編集するとします。 Webメソッドは1つしかありません！異なる名前の同じデータ型でoveloadできません！ 誰もこの種の問題を解決しますか？
