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ótese
isasfollows:
[{"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
});
}