JQuery jqGrid com vraptor 3 [RESOLVIDO]

25 de janeiro de 2011 7 respostas

unkillable 25 de janeiro de 2011

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:

<?xml version ="1.0" encoding="utf-8"?>
 <rows> 
<page> </page> 
<total> </total> 
<records> </records> 
<row id = "unique_rowid"> 
<cell> cellcontent </cell> 
<cell> <![CDATA[<font color="red">cell</font> content]]> </cell>
...
</row> 

<row id = "unique_rowid"> 
<cell> cellcontent </cell> 
<cell> <![CDATA[<font color="red">cell</font> content]]> </cell>
...
</row>
...
</rows>

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?

7 Respostas

Lucas_Cavalcanti 26 de jan. de 2011

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

unkillable 26 de jan. de 2011

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!

public class Rows {
	private Long pages;
	private Long total;
	private Long records;
	private List<Row> rows;

        ... getters and setters

}

public class Row {
	private String id;
	private List<Cell> cells;

        ... getters and setters
}

public class Cell {
	private String cellcontent;

        ... getters and setters
}

O controller ficou assim:

@Get @Path("/contatos/show.xml")
	public void show() {
		List<Contato> 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();
		
	}

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.

unkillable 26 de jan. de 2011

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!!!

pbnf 16 de fev. de 2011

Olá unkillable ,

Vc já consegui utilizar o jqGrid com o Vraptor3 ?

joander.vieira 27 de set. de 2011

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

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>

Lucas_Cavalcanti 28 de set. de 2011

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

joander.vieira 29 de set. de 2011

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

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

Criado 25 de janeiro de 2011

Ultima resposta 29 de set. de 2011

Respostas 7

Participantes 4

7 Respostas

Topicos relacionados