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 웹 메소드 컨벤션입니까? 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 옵션 용 PHP 코드를 포팅했습니다. 작은 원숭이 그리스를 사용하면 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
Grid.base.js 및 기타 JQGRID 파일을 수정하지 않고 JQGRID를 JSON & ASP.NET과 함께 작동시킬 수 있다고 생각합니다. 데이터 타입 속성을 사용하여 자신의 사용자 정의 AJAX 호출을 정의하고 JSON 리더를 정의해야합니다. 그리드가 다시로드 될 때마다 사용자 정의 ajax 호출 및 독자.
프로세스는 XML에 대해 유사합니다. JSONREADER 대신 XMLREADER를 정의합니다.
JSONREADER의 모든 속성은 온라인 문서
사용자 정의 데이터 유형의 예는 라이브 데모 페이지 "3.3의 새로운"아래
내 구현 :
데이터 : "{ 'page': '" + gdata.page + ",'행 ':'" + gdata.rows + ", 'sidx': '" + gdata.sidx + ",'sord ': ' " + gdata.sord +"', 'nd': ' " + gdata.nd +"', '_ search': ' + gdata._search + ",'searchfield ':' + ts.p.searchData .searchfield + " ','searchString ':' + ts.p.searchData.SearchString +" ','SearchOper ':' + ts.p.searchData.SearchOper + " '}",
성공 : 기능 (JSON, ST) {if (st == "success") {addjsondata (json.d, ts.grid.bdiv); if (loadComplete) {loadComplete (); }}
완전한 Ajax 이벤트 사용 성공 이벤트를 사용하여 주입되었습니다. 이 방법으로는 이중 JSON SeriLe를 방지하는 것입니다.
셀 편집으로 깨닫지 못한 한 가지 : 동일한 데이터 유형 (int)으로 여러 셀을 편집하고 싶다고 가정합니다. 웹 방법이 하나뿐입니다! 그리고 나는 다른 이름의 동일한 데이터 유형으로 oveload를 할 수 없습니다! 이런 종류의 문제를 해결하는 사람이 있습니까?
