0

I'm trying to use JsTree, with Ajax. The first image shows the initial state of JsTree without the Ajax call.

Initial

The user click on the first node, and selects all items, according second image.

User click in node

Before post values, I call a function to grab all the selected items in JsTree. Result of function, it is third image.

Selected values

If I call the data by Ajax, the result of the JsTree conforms to the image four

Values set from ajax data

Question

What should I set / configure, so the Ajax return is the same when the user clicks on the nodes. After the return of Ajax, there is no selected node.

My JsTree Config

$('#tree').jstree({
    'plugins': ["checkbox"],
    'core': {
        'data': {
            'url': '/Ajax/AcessoFuncao/',
            'data': function (node) {                        
                return { 'acessoperfil': $("#AcessoPerfilID").val() };
            }
        }
    }
});

My Code Before Post

function BeforePost()
{
    document.getElementById("items").value = $("#tree").jstree(true).get_checked().join(',');
    alert(document.getElementById("items").value);
}

My Json Data

[  
   {  
      "id":"1",
      "parent":"#",
      "text":"AcessoFuncao",
      "icon":"fa  fa-tags",
      "state":{  
         "opened":false,
         "disabled":false,
         "selected":true
      },
      "li_attr":null,
      "a_attr":{  
         "id":null,
         "class":"no_checkbox"
      }
   },
   {  
      "id":"1_1",
      "parent":"1",
      "text":"Listar",
      "icon":"fa fa-list",
      "state":{  
         "opened":false,
         "disabled":false,
         "selected":true
      },
      "li_attr":null,
      "a_attr":{  
         "id":null,
         "class":"jstree-checked jstree-clicked"
      }
   },
   {  
      "id":"1_4",
      "parent":"1",
      "text":"Inserir",
      "icon":"fa fa-plus",
      "state":{  
         "opened":false,
         "disabled":false,
         "selected":true
      },
      "li_attr":null,
      "a_attr":{  
         "id":null,
         "class":"jstree-checked jstree-clicked"
      }
   },
   {  
      "id":"1_2",
      "parent":"1",
      "text":"Visualizar",
      "icon":"fa fa-eye",
      "state":{  
         "opened":false,
         "disabled":false,
         "selected":true
      },
      "li_attr":null,
      "a_attr":{  
         "id":null,
         "class":"jstree-checked jstree-clicked"
      }
   },
   {  
      "id":"1_8",
      "parent":"1",
      "text":"Alterar",
      "icon":"glyphicon glyphicon-edit",
      "state":{  
         "opened":false,
         "disabled":false,
         "selected":true
      },
      "li_attr":null,
      "a_attr":{  
         "id":null,
         "class":"jstree-checked jstree-clicked"
      }
   },
   {  
      "id":"1_16",
      "parent":"1",
      "text":"Excluír",
      "icon":"fa fa-trash-o",
      "state":{  
         "opened":false,
         "disabled":false,
         "selected":false
      },
      "li_attr":null,
      "a_attr":null
   }
]
Tiedt Tech
  • 719
  • 15
  • 46

1 Answers1

0

You explicitly set the state of the last node (1_16) as selected : false - if you want it to be selected - make sure you return selected : true.

vakata
  • 3,726
  • 1
  • 17
  • 31
  • my problem is after load ajax data, no items are marked as selected using `BeforePost` code. – Tiedt Tech Jun 13 '17 at 11:23
  • ```get_checked``` returns the same regardless of how data is loaded (provided it is the same data and that it is indeed loaded). I can't help you further without a demo. – vakata Jun 14 '17 at 15:35
  • I'll create the demo. In tests, I noticed that at line 3431 of jstree.js, if the data comes from ajax, `state.core.selected` has no data. However, if I use the data equal to the ajax result, the `state.core.selected` has data – Tiedt Tech Jun 14 '17 at 18:43