JQuery jqGrid com vraptor 3 [RESOLVIDO]

Front-end
#1

Olá,

Alguém tem algum exemplo (mesmo que seja bem simples) do uso de jqGrid com vraptor 3?

Eu já tentei, mas não sei gerar o xml compatível com o jqGrid. Aquele xml serializer que transforma a entidade em xml não vai servir porque não fica de acordo com o formato do jqGrid. Segue abaixo o formato:

[code]<?xml version ="1.0" encoding="utf-8"?>





cellcontent
<![CDATA[cell content]]>
…

cellcontent <![CDATA[cell content]]> ... ... [/code]

Aproveitando o post,

O que posso usar com vraptor para criar aplicativos web com interface legal e bonita? JQuery (corrijam se eu estiver errado), facilita a codificação do javascript, tem nada pronto, a gente tem que criar os componentes no braço usando as facilidades do jquery. Então temos que recorrer a plugins, nesse caso existe algum plugin completo cheio de componentes como se fosse um richfaces da vida?

#2

olá,

o jeito mais fácil de gerar esse xml é criando as classes Rows, Row e Cell, e organizar os seus atributos da mesma forma que o xml espera.
também dá pra criar um converter do XStream que gera o xml desse jeito também.

vc pode usar JQuery + plugins, como o JQuery UI, o YUI ou o ExtJS pra fazer interfaces bonitas. Acho o jquery mais fácil de usar

#3

Lucas, seguindo suas dicas eu criei uma estrutura igual a do xml que mostrei. Entretanto o xml retornado nao condiz com as classes. Vou mostrar as classes aí se possível alguém me corriije!

[code]public class Rows {
private Long pages;
private Long total;
private Long records;
private List rows;

    ... getters and setters

}

public class Row {
private String id;
private List cells;

    ... getters and setters

}

public class Cell {
private String cellcontent;

    ... getters and setters

}
[/code]

O controller ficou assim:

[code]@Get @Path("/contatos/show.xml")
public void show() {
List todos = dao.listaTudo();
Rows rows = new Rows();

	rows.setPages(1L);
	rows.setTotal(1L);
	rows.setRecords((long)todos.size());
	
	List<Row> row = new ArrayList<Row>();
	
	
	
	int i = 0;
	for(Contato con : todos) {
		Row r = new Row();
		
		r.setId(String.valueOf(i++));
		List<Cell> cells = new ArrayList<Cell>();
		Cell cell;
		
		cell = new Cell();
		cell.setCellcontent(String.valueOf(con.getId()));
		cells.add(cell);
		
		cell = new Cell();
		cell.setCellcontent(con.getNome());
		cells.add(cell);
		
		cell = new Cell();
		cell.setCellcontent(con.getSobrenome());
		cells.add(cell);
		
		r.setCells(cells);
	
		row.add(r);
	}
	
	rows.setRows(row);
	result.use(Results.xml()).from(rows).serialize();
	
}[/code]

Nem to mexendo com a jqGrid ainda. Apenas chamei no navegador a url “http://localhost:8080/contatos/contatos/show.xml”. me retorna isso:

<rows> <pages>1</pages> <total>1</total> <records>2</records> </rows>

Tá ignorando a List rows.

#4

Desculpa, pesquisando aqui no fórum eu descobri que Results.xml não popula campos não primitivos. daí dei um include nos campos.

result.use(Results.xml()).from(rows).include("rows", "rows.cells").serialize();

Agora ficou bom!

Porém deu problema com a visualização da grid, não tá mostrando nada (nada que falo é a própria grid, e não os campos), mas isso já é outra história. RESOLVIDO!!!

#5

Olá unkillable ,

Vc já consegui utilizar o jqGrid com o Vraptor3 ?

#6

[quote=Lucas Cavalcanti]olá,

o jeito mais fácil de gerar esse xml é criando as classes Rows, Row e Cell, e organizar os seus atributos da mesma forma que o xml espera.
também dá pra criar um converter do XStream que gera o xml desse jeito também.

vc pode usar JQuery + plugins, como o JQuery UI, o YUI ou o ExtJS pra fazer interfaces bonitas. Acho o jquery mais fácil de usar[/quote]

Ola Lucas Cavalcanti,

Estou tentando montar um JqGrid, consigui renderizar ele e prencher os dados, porém estou com problema para fazer a paginação, quando clico em Next ele não passa para próxima pagina, se eu digitar na mão 2 (quero ir para página 2) ele não, a busca tambem não esta funcionando, tenho que fazer alguma configuração ?
Estou usando Vraptor 3, Hibernate, Jquery e jsp.

O Grid funcionando, porém não pagina:

O CONTROLLER:

@Get
	@Path("/teste.json")  
    public void testeJson(){		
		  List<Teste> cells = dao.listAll();  
		  List<GridRow> rows = new ArrayList<GridRow>();  
		  
          GridRow row ;  
          List<String> cell ;
          for(Teste t : cells){
        	  
        	  cell = new ArrayList<String>();
        	  cell.add(t.getId().toString());
        	  cell.add(t.getNome());
        	  cell.add(t.getSenha());
        	  
        	  row = new GridRow();
        	  row.setId(t.getId().toString());
        	  row.setCell(cell);
        	  rows.add(row);
          }  
        int total = (rows.size() / 5) + 1;    
        GridJson grid = new GridJson(1, total, rows);  
        
        result.use(json()).withoutRoot().from(grid).include("rows").include("rows.cell").serialize();
		
    }

O JSP

<table id="tabela"></table> 
<div id="pager"></div>

<script type="text/javascript">
  jQuery('#tabela').jqGrid({
         url: '<c:url value="/teste.json"/>',
      	 datatype: 'json',
	 mtype: 'GET',
	colNames:['Id','Nome', 'Senha'],
	colModel:[
	         {name:'id',index:'id', width:100},
		 {name:'nome',index:'nome', width:150},
		 {name:'senha',index:'senha', width:100}
          ],
	 rowNum:5,
	rowList:[5,10,20],
	height: 'auto',
	width: '700',
	pager: '#pager',
	sortname: 'nome',
	viewrecords: true,
	sortorder: 'asc',
	multiselect: true,
	caption:'Titulo da minha tabela'		 
});
jQuery("#tabela").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
</script>
#7

ele está retornando os dados corretamente? a tabela aparece direito?

rode o sistema num firefox com o firebug instalado, e veja se acontece algum erro

#8

[quote=Lucas Cavalcanti]ele está retornando os dados corretamente? a tabela aparece direito?

rode o sistema num firefox com o firebug instalado, e veja se acontece algum erro[/quote]

Amigo, obrigado por me responder, mas não continuarei a usar o JqGrid, resolvi usar tabela comum com estilização com css, porque tenho pressa em fazer o meu projeto e não estou tendo tempo para aprender a usar o jqGrid.

Assim que voltar a utilizar o jqGrid entrarei em contato contigo, pois admiro o seu conhecimento e disposição em nos ajudar.

God Bless
Joander

#9