Mount tree - JSTREE

11

I was reading about JSTree and saw that it understands a Json that can be placed in the tree without recursion, ie, it needs the default id,parent,text according to documentation .

I created a self referenced table called Hipotese .

I have set a% return% with the data of procedure together with the data of Hipotese Pai .

  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

Structure of table Hipotese Filha .

TheanswerinsuccessionofHipóteseisasfollows:

[{"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"}
]

Someone can help me. Nothing happens, nor Javascript error in console has.

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;
}

My Jquery function that populates the tree :

$(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
  });
}
    
asked by anonymous 10.12.2014 / 01:34

1 answer

11

According to documentation , the data option should not be placed directly on the option object, but yes within option 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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/jstree.min.js"></script>

<div id="tree">
</div>
    
23.12.2014 / 17:22