Implementando jQuery jqGrid com ASP.Net e JSON formatação
https://stackoverflow.com/questions/181029
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Alguém já foi capaz de implementar o plugin grade JQuery, jqGrid? Eu estou tentando implementar a paginação JSON, e eu sinto que estou chegando perto, mas que eu também estou sendo inundado por detalhes irrelevantes. Se alguém pudesse postar um código de exemplo, eu agradeceria muito.
Solução
Encontrado seu post enquanto eu estava tentando fazer isso para o meu projeto. Eu tenho que trabalhar. Para quem precisa no futuro, jqGrid não irá funcionar fora da caixa com JSON e ASP.NET. Você precisa fazer algumas pequenas modificações para grid.base.js. Em torno da linha 829, substitua a seção de caso json com o seguinte:
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;
Em seguida, adicione a seguinte função:
function cleanUp(responseText) {
var myObject = JSON.parse(responseText); //more secure than eval
return myObject.d; //ASP.NET special
}
Você também precisará incluir o JSON analisador e stringifier . Junto com o trabalho com ASP.NET, este código revisto também mais seguro porque a instrução eval é gone.
EDIT: Eu deveria ter também observou que você pode ter que fazer edições semelhantes aos grid.celledit.js, grid.formedit.js, grid.inlinedit.js e grid.subgrid.js .
Outras dicas
Eu tenho jTemplates apenas para fazer paginação do lado do cliente com jQuery e ASP.NET. Eu fiz um post sobre ele que você pode encontrar aqui: http: // www .aaron-powell.com / blog.aspx? id = 1209
Ele olha para como criar um local de dados templated, retornar os dados do ASP.NET e, em seguida, implementar uma solução de paginação.
Você pode usar o ASP.Net MVC JsonResult para preencher a grade.
Pessoa Class
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.
}
}
Em seu controlador, você teria:
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
}
};
}
E a configuração jqGrid para a url seria:
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
Eu só estou debatendo tentando reunir tudo. Minha primeira preocupação é simplesmente gerar uma resposta JSON correto. Minha classe voltou parece ser serializado como uma propriedade denominada 'd' - isso é uma coisa JQuery, ou convenção método web ASP.Net? Tenho medo de que jqGrid estará olhando para os dados a ser de nível superior, enquanto que asp.net vai colocá-lo em uma propriedade chamada '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);
}
});
});
O plugin FlexGrid é bastante escassa no doumentation no entanto, em uma pequena seção sobre a página de demonstração não é um tut sobre como criar um objeto JSON serializada, isso é um pouco enganosa, porque a grade requer um formato específico, tenho portado o código php para a opção xml com um pouco de graxa macaco você pode fazer o mesmo para o json formatação
Aqui está a minha porta xml
the setup for the grid
$("#tableToFlex").flexigrid({
url: 'WebService.asmx/getData'}
... *other configs* ...);
Por favor, considere o seguinte código na classe 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
Eu acho que você pode fazer o trabalho jqgrid com JSON e asp.net sem modificar grid.base.js e outros arquivos jqGrid, você tem que usar a propriedade tipo de dados para definir a sua própria chamada ajax personalizada e definir um leitor json, vontade jqgrid em seguida, usar a sua chamada ajax personalizado e leitor cada vez que recarrega a grade.
O processo é semelhante para xml que você acabou de definir um XmlReader em vez de um jsonreader.
Todas as propriedades do jsonreader são definidos no documentação on-line
Para exemplos de tipo de dados personalizados ver "Função como tipo de dados" no href="http://trirand.com/jqgrid/jqgrid.html" rel="nofollow noreferrer"> página de demonstração sob "New in 3.3"
Meu Implementar:
dados: "{ 'página': '" + gdata.page + " ' 'linhas':'" + gdata.rows + " ' 'sidx':'" + gdata.sidx + " '' sord ':' "+ gdata.sord +" ' 'nd':' "+ gdata.nd +" ' '_ pesquisa':' "+ gdata._search +" ' 'searchField':'" + ts. p.searchdata.searchField + " ' 'searchString':'" + ts.p.searchdata.searchString + " ' 'searchOper':'" + ts.p.searchdata.searchOper + "'}",
sucesso: function (JSON, st) { if (st == "sucesso") {addJSONData (JSON.d, ts.grid.bDiv); se (LoadComplete) {LoadComplete (); }}
Insted usando completa evento ajax uso sucesso do evento. Desta forma é evitar que o seralize dupla json.
Apenas uma coisa que eu não percebo com a edição de célula: Suponha que eu quero editar várias células com o mesmo tipo de dados (int). Eu tenho apenas um método web! e eu não posso oveload com um mesmo tipo de dados com nome diferente e foi decorado! Será que alguém resolver este tipo de probleme?
