VRaptor3 + Flexigrid + JSON

ae Cherubini e pessoal!!!
Consegui serializar os dados para inserir no Flexigrid… porém como que eu jogo isso na View?
Dentro do jsp como fica o javascript? quais os imports que preciso?
aguardo resposta.
obrigado.
Leandro.

Ninguém?

jsp, e imports?

vc não vai colocar código java no jsp!

vc só precisa chamar a url da lógica que gera o json via ajax

[quote=Lucas Cavalcanti]jsp, e imports?

vc não vai colocar código java no jsp!

vc só precisa chamar a url da lógica que gera o json via ajax[/quote]

Lucas Cavalcanti,

Você tem um exemplo de como chamar a url da logica do json via ajax de dentro do jsp?

Estou tentando com um

mas não está mostrando o Flexigrid…

Aguardo resposta.

Obrigado.

Leandro.

se vc tem o div:

<div id="banana"></div>

e quer mostrar o flexgrid dentro dessa div, vc tem que colocar esse código de javascript no final da sua jsp, antes do

<script type="text/javascript">
   $("#banana").flexgrid({
        url: '/url/da/logica/que/gera/o/json',
        //outras configurações do flexgrid
   });
</script>

[quote=Lucas Cavalcanti]se vc tem o div:

<div id="banana"></div>

e quer mostrar o flexgrid dentro dessa div, vc tem que colocar esse código de javascript no final da sua jsp, antes do

[code]

[/code][/quote]

Engraçado! ainda nao to conseguindo renderizar o flexigrid… to fazendo tudo direitinho… incluí o codigo:

No header.jspf

E estou chamando no lista.jsp

[code]

     <script type="text/javascript">
					$("#flex1").flexigrid({
						url: '/usuario/lista.json',
						dataType: 'json',
						colModel : [
							{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
							{display: 'Email', name : 'email', width : 250, sortable : true, align: 'left'},
							{display: 'Senha', name : 'senha', width : 40, sortable : true, align: 'left'},
							{display: 'Nome', name : 'nome', width : 250, sortable : true, align: 'left'},
							{display: 'Roles', name : 'roles', width : 150, sortable : true, align: 'left'}			
						],
						buttons : [
							{name: 'Add', bclass: 'add', onpress : onClick},
							{name: 'Delete', bclass: 'delete', onpress : onClick},
							{separator: true}
						],
						searchitems : [
							{display: 'Email', name : 'email'},
							{display: 'Roles', name : 'roles'},
							{display: 'Nome', name : 'nome', isdefault: true}
						],
						sortname: "id",
						sortorder: "asc",
						usepager: true,
						singleSelect: true,
						title: 'Users',
						useRp: true,
						rp: 15,
						showTableToggleBtn: true,
						width: 950,
						height: 200
					});   
					</script>[/code]

quando eu chamo diretamente a url /usuario/lista.json vem o arquivo direitinho com os dados.

O que posso estar fazendo errado?

o problema é que

url: '/usuario/lista.json', 

desconsidera o context path…

então vc teria que fazer algo do tipo:

url: '<c:url value="/usuario/lista.json"/>',  

ou colocar o nome do contexto hard_coded:

url: '/contexto/usuario/lista.json', 

Já tentei desta maneira aí… nem sinal do flexigrid…

[code]

			<script type="text/javascript">
					$("#flex1").flexigrid({
						url: '<c:url value="/usuario/lista.json"/>',
						dataType: 'json',
						colModel : [
							{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
							{display: 'Email', name : 'email', width : 250, sortable : true, align: 'left'},
							{display: 'Senha', name : 'senha', width : 40, sortable : true, align: 'left'},
							{display: 'Nome', name : 'nome', width : 250, sortable : true, align: 'left'},
							{display: 'Roles', name : 'roles', width : 150, sortable : true, align: 'left'}			
						],
						buttons : [
							{name: 'Add', bclass: 'add', onpress : onClick},
							{name: 'Delete', bclass: 'delete', onpress : onClick},
							{separator: true}
						],
						searchitems : [
							{display: 'Email', name : 'email'},
							{display: 'Roles', name : 'roles'},
							{display: 'Nome', name : 'nome', isdefault: true}
						],
						sortname: "id",
						sortorder: "asc",
						usepager: true,
						singleSelect: true,
						title: 'Users',
						useRp: true,
						rp: 15,
						showTableToggleBtn: true,
						width: 950,
						height: 200
					});   
					</script>		[/code]

Empaquei… :frowning:

dá uma olhada no firebug pra ver se ele está fazendo a requisição pro lugar certo…

(vc vai precisar de um Firefox, com o plugin firebug instalado, e olhar pra aba console)

[quote=Lucas Cavalcanti]dá uma olhada no firebug pra ver se ele está fazendo a requisição pro lugar certo…

(vc vai precisar de um Firefox, com o plugin firebug instalado, e olhar pra aba console)[/quote]

Consegui um progresso mas acho que ta faltando a implementação do onClick:

Apareceu no firebug…

Não tenho noção de como implementar os 2 onClick.

buttons : [  
           {name: 'Add', bclass: 'add', onpress : onClick},  
           {name: 'Delete', bclass: 'delete', onpress : onClick},  
           {separator: true}  
],

o problema está aqui…

o que vc quiz dizer com esse onClick?

acho que o que vc precisa fazer é criar uma função pro botão add e uma pro botão delete, e fazer a ação necessária pra cada…

[quote=Lucas Cavalcanti] buttons : [ {name: 'Add', bclass: 'add', onpress : onClick}, {name: 'Delete', bclass: 'delete', onpress : onClick}, {separator: true} ],

o problema está aqui…

o que vc quiz dizer com esse onClick?

acho que o que vc precisa fazer é criar uma função pro botão add e uma pro botão delete, e fazer a ação necessária pra cada…[/quote]

Ae consegui! Funcionou a parte de mostrar os dados no flexigrid… está ok agora.
Agora só falta fazer a parte de Adicionar e Remover dentro do flexigrid…
Alguém tem alguma ideia de como fazer isso ao clicar no botao Adicionar ou Remover?

no remover vc precisa fazer algo parecido com pegar o id do usuário (algum dos parametros da function deve ser isso) e mandar uma requisição ajax para /usuarios/remove (a url do método remove do seu UsuariosController, ou algo parecido), passando esse id

o adicionar, vc precisa fazer algo como criar uma linha nova no grid com inputs, e o submit criaria um outro cara via ajax…

[quote=Lucas Cavalcanti]no remover vc precisa fazer algo parecido com pegar o id do usuário (algum dos parametros da function deve ser isso) e mandar uma requisição ajax para /usuarios/remove (a url do método remove do seu UsuariosController, ou algo parecido), passando esse id

o adicionar, vc precisa fazer algo como criar uma linha nova no grid com inputs, e o submit criaria um outro cara via ajax…[/quote]

Consegui fazer!

Unico porém:

No firefox está funcionando que é uma beleza… mas no IE8, o Flexigrid não popula. Ele popula somente quando eu clico em alguma coluna ou em algum dos controles de paginação do flexigrid… ja viu isso Lucas Cavalcanti?

não funcionar no IE8? sempre :wink:

dá uma olhada no site do flexgrid se tem alguma coisa falando sobre isso

Funcionou! Tinha um errinho no javascript!!! Obrigado!!!

[quote=Cherubini]Garcia funciou !!!

Porem flexigrid é um lixo ! Tive que transformar meu json nesse formato

O Flexigrid aceita o segundo json nao o primeiro

{
  "page": 1,
  "total": 1,
  "rows": [
    {
      "id": "1",
      "cell": [
        {
          "id": 1,
          "email": "thiago@thiago.com",
          "password": "123456",
          "name": "t",
          "rule": "ADMINISTRATOR"
        }
      ]
    }
  ]
}

//ACEITO PELO FLEXIGRID

{
  "page": 1,
  "total": 1,
  "rows": [
    {
      "id": "1",
      "cell": [
        "1",
        "thiago@thiago.com",
        "123456",
        "t",
        "ADMINISTRATOR"
      ]
    }
  ]
}

ai tive que fazer uma gambi para aceitar

@Path("/user.json")
	public void listUsers(){
		List<User> users = userDao.getUserDao().listAll();
		List<FlexigridRow> rows = new ArrayList<FlexigridRow>();
			
			List<String> cell = new ArrayList<String>();
			FlexigridRow row = new FlexigridRow();
			row.setId(users.get(0).getId()+"");
			
			String id = users.get(0).getId()+"";
			String email = users.get(0).getEmail()+"";
			String password = users.get(0).getPassword()+"";
			String name = users.get(0).getName()+"";
			String rule = users.get(0).getRule()+"";
			cell.add(id);
			cell.add(email);
			cell.add(password);
			cell.add(name);
			cell.add(rule);
			
			row.setCell(cell);
			rows.add(row);
		
		FlexiGridJson grid = new FlexiGridJson(1, users.size(), rows);
		result.use(json()).withoutRoot().from(grid).include("rows").include("rows.cell").serialize();   
	}

Vocês não uma maneira mais bonita ?rs

Vlws[/quote]

Cherubini, como você esta chamando o seu controller ( @Path("/user.json") public void listUsers(){ ) no flexigrid.

O meu não aparece os dados.

Por favor poste ai o seu flexigrid o jsp e o controller.