I have created an example of json to populate a jstree and as below, it worked.
Using codeigniter, I would like to know how the database structure could be, taking into account that I need to set up a logic to grant permission for a given group (ACL), exampleAdministrador and Usuário , and done this, how could I return the mysql data to popular jstree.
I will use Ajax.
Possible tables
tb_usuario
id
nome
grupo_id
tb_grupo
id
nome
tb_permissao
id
permissoes
grupo_id
$(document).ready(function() {
var dados = [{
"text": "Dashboard",
"children": []
},
{
"text": "Configuração",
"type": "grupo",
"children": [{
"text": "Usuário",
"type": "funcao",
"children": [{
"text": "Criar",
"type": "acao",
"children": []
},
{
"text": "Editar",
"type": "acao",
"children": []
},
{
"text": "Excluir",
"type": "acao",
"children": []
},
{
"text": "Visualizar",
"type": "acao",
"children": []
},
]
},
{
"text": "Permissão",
"type": "funcao",
"children": [{
"text": "Criar",
"type": "acao",
"children": []
},
{
"text": "Editar",
"type": "acao",
"children": []
},
{
"text": "Excluir",
"type": "acao",
"children": []
},
{
"text": "Visualizar",
"type": "acao",
"children": []
},
]
},
]
},
];
// jstree
$('#jstree_funcao').jstree({
'core': {
'check_callback': true,
'themes': {
'responsive': false
},
'data': dados
},
'plugins': ['types', 'checkbox', 'dnd'],
'checkbox': {
'keep_selected_style': false
},
'types': {
'grupo': {
'icon': 'fa fa-folder'
},
'funcao': {
'icon': 'fa fa-angle-double-right'
},
'acao': {
'icon': 'fa fa-lock'
}
}
});
});<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
</head>
<body>
<div id="jstree_funcao"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</body>
</html>