11

Estava lendo sobre JSTree e vi que ele entende um Json que pode ser colocado na árvore sem recursividade, ou seja, ele precisa do padrão id,parent,text de acordo com a documentação .

Criei uma tabela auto referenciada chamada Hipotese.

Montei uma procedure de retorno com os dados da Hipotese Pai juntamente com os dados da Hipotese Filha.

  select H.IDHipotese as id ,  
case when (HPai.IDHipotese) is null then '#'
when @IDHipotese <> 0 then '#' 
 else  CAST(HPai.IDHipotese as varchar(4)) end as parent,H.HipoteseIncidencia as text
 from HipoteseIncidencia H
left join HipoteseIncidencia as HPai
on H.IDHipotesePai = HPai.IDHipotese
where 
(@IDHipotese = 0 or H.IDHipotese= @IDHipotese) AND
(@IDIdioma=0 or H.IDIdioma = @IDIdioma)
 order by parent,id

Estrutura da tabela Hipótese.

Captura de tela

O resposta no sucess do Ajax é o seguinte:

[
  {"id":"27","parent":"#","text":"Incidência Obrigatória"},
  {"id":"28","parent":"#","text":"Executar trabalho em regime de turnos ininterruptos de revezamento"},
  {"id":"30","parent":"#","text":"Executar trabalho em jornada de sobreaviso"},
  {"id":"33","parent":"28","text":"Trabalhar em ferrovias"},
  {"id":"35","parent":"27","text":"Utilizar sistemas alternativos eletrônicos de marcação do ponto"}
]

Alguém pode me ajudar. Não aconteçe nada, nem erro de Javascript no console tem.

HTML:

<div id="tree">
</div>

Asmx:

[WebMethod]
public string retornaJsonArvore()
{
  List<retornaListaHipotese_Result> lst = null;
  using (labEntities entidades = new labEntities())
  {
    lst = entidades.retornaListaHipotese().ToList();
  }
  var serializer = new JavaScriptSerializer();
  string json = serializer.Serialize(lst);
  return json;
}

Minha função Jquery que preenche a arvore:

$(function () {
  $.ajax({
    type: "POST",
    url: '<%=ResolveUrl("../ws/Arvore.asmx/retornaJsonArvore")%>',
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (json) {
      createJSTrees(json.d);
    },
    error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.status);
      alert(thrownError);
    }
  });
});

function createJSTrees(jsonData) {
  $("#tree").jstree({
    "data": jsonData
  });
}
0

1 Resposta 1

11
+25

De acordo com a documentação, a opção data não deve ser colocada diretamente no objeto de opções, mas sim dentro da opção core:

var jsonData = [
  {"id":"27","parent":"#","text":"Incidência Obrigatória"},
  {"id":"28","parent":"#","text":"Executar trabalho em regime de turnos ininterruptos de revezamento"},
  {"id":"30","parent":"#","text":"Executar trabalho em jornada de sobreaviso"},
  {"id":"33","parent":"28","text":"Trabalhar em ferrovias"},
  {"id":"35","parent":"27","text":"Utilizar sistemas alternativos eletrônicos de marcação do ponto"}
];

$("#tree").jstree({
    core:{
        "data": jsonData
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/jstree.min.js"></script>

<div id="tree">
</div>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .